Untangling spring week8

29
Untangling the web WEEK 8 – A DEVELOPER MINDSET, BACKEND INTRODUCTION, JS ISSUES

Transcript of Untangling spring week8

Page 1: Untangling spring week8

Untangling the webWEEK 8 – A DEVELOPER MINDSET, BACKEND INTRODUCTION, JS ISSUES

Page 2: Untangling spring week8

Agenda

A developer mindset How to get less frustrated Resources for finding out how to do things Places to ask for help Working as a group, pair programming, etc.

Backend servers Databases, services, JSON

JS on the server Node.js, build environments

Page 3: Untangling spring week8

Tonight is more about definitions and mindset than development

I’m going to throw a lot of concepts at you, but they build on the previous classes less directly than the previous few classes

Just relax and think about the ideas I’m describing rather than the development details

Page 4: Untangling spring week8
Page 5: Untangling spring week8

A developer mindset

Zen and the Art of Motorcycle Maintenance “Assembly of Japanese BBQ requires great peace of mind”

Comfort with discomfort Eventually you’ll figure it out. Or you won’t. Life will probably go on. Unless

you’re trying to re-write the code for the airlock and you’re on a space station. Then still don’t panic!

Imposter syndrome Even as you gain skills you’ll still sometimes feel like the worst developer in

the world and wonder how anyone would ever hire you. It’s not your job to live up to over-inflated expectations, but only to try to do what you’ve committed to.

Page 6: Untangling spring week8

Concentration

https://medium.com/@crowquine/the-mindset-of-the-software-developer-2b8f64ee96e5#.pglf8vhw7

Holding everything in your mind When I’m coding I *HATE* to be interrupted So much so that my boyfriend built me a little tent around my desk where I

can pull the curtains and put on my earplugs and he knows to never so much as wiggle the curtains unless he sends me email to ask if I can come out

Keeping a stack of inter-related concepts in mind, particularly a complex set of mathematical constructs, is just hard and if I’m interrupted it may take quite some time to get back to where I was

Page 7: Untangling spring week8

How to get less frustrated

Coding is inherently frustrating You’re trying to describe something very precisely to a machine that is more

literal than a 3 year old. And might have worse communication skills. Error messages are never sufficient.

Work on the mental model Understand what you’re doing. Read conceptual help topics first, then man

pages Draw pictures

Walk away for a while. Take more breaks. Take a walk and think about it.

Page 8: Untangling spring week8

Livecoding and video lessons

Class 6, where I recorded my screen, is a thing. It’s called livecoding. Twitch.tv https://www.liveedu.tv/livestreams/javascript/ Even youtube has a lot of content These are all regular folks who stream. Expect variable quality.

Online education is a huge thing I subscribe to pluralsight, safaribooks, stan Winston school, Adobe cloud, and

others I also buy courses from select individuals on a regular basis It gets expensive, but if I pick up a nugget or two from a course it’s worth it

Page 9: Untangling spring week8

Pluralsight

The largest online education site, I think. It’s about $300 a year, sometimes a bit less with sales. Very good quality content on a wide array of topics ranging from

programming to application use to graphics and creative process

Page 10: Untangling spring week8

Safari books

This is O’Reilly’s online site. It is also about $300 a year. They have some courses, but mostly it is books and videos. They have all of the Packt publishing books, all of the O’Reilly books,

and various other small publishers that they strike deals with. Early release books, so you can see content before release, make

comments, interact with authors, etc. I use this less than Pluralsight, but the ability to search forthcoming

books makes it worth it to me.

Page 11: Untangling spring week8

Hackhands

Now owned by pluralsight, but it runs as a separate company still Pay by the minute for a shared screen session with an expert Kind of like how I run my zoom sessions sometimes Please feel free to continue to use me for that during the course Can find experts on a variety of topics. When I’m learning a new

language or library it sometimes saves me many hours to pay someone $20-$50 to consult for a bit.

Page 12: Untangling spring week8

Wes Bos

Wes is a developer in Hamilton, Ontario that makes fantastic courses on Javascript and React.

Generally $80-100 for a 5 or 6 hour course, so not cheap He has good sample projects and materials and maintains a good

online presence for questions, though He has an ES6 course out right now and I’m anxiously awaiting his

course on async/await that should be out in the next month or two

Page 13: Untangling spring week8

Code School, Code Academy, etc.

https://www.codecademy.com/learn/javascript https://www.codeschool.com/learn

Page 14: Untangling spring week8

Quora

I’m not a huge fan, but they do have an interesting community It’s a good place to ask conceptual questions or questions about how

programs interface with the real world Not as good for pure programming questions

Page 15: Untangling spring week8

Stack Overflow

This is the place for programming questions Variable code quality, so don’t cut and paste haphazardly But feel free to test it out Even in professional settings you’ll often see code from stackoverflow The common convention is the leave a comment in the code with a link

to the stackoverflow question

Page 16: Untangling spring week8

Working as a group

Some groups have been a bit frustrated with GitHub I intentionally did not impose a process for working together because

you can find many different ways of doing so Informal mechanisms work best for small projects, but more formality is

needed as teams grow and projects get longer I’m fine for this class if you just have one person manage the repo and

pass them code to check in Ideally you’ll each independently commit, and I trust that team

members will do roughly equal amount of work, but I won’t mark down for group approaches

Page 17: Untangling spring week8

Public project strategy

Best for large projects without a fixed team Owner is the only one with repo permissions Other people fork the code and modify it then make merge requests

back to the owner Careful, everything you have changed gets put into the merge request!

Use a branch to do your playing around Project owner will review the request and take those pieces they want

Page 18: Untangling spring week8

Project owner strategy

This is how I run my big projects with fixed team members A project owner is the only one who can check into the master branch The master branch is where builds come from Contributors can create branches and check code into those branches

and then send me a merge request when they want to move it to master This only happens when their code is synced up with the latest changes in

the master branch and has passes acceptance tests

Page 19: Untangling spring week8

Co-contributor strategy

Add others as contributors, don’t enforce branch and merge rules This is really only suitable on small projects Requires team members to communicate about who is working on

which pieces to avoid having to merge or causing conflicts Ideally have people working in separate files most of the time

Page 20: Untangling spring week8

Pair programming

This is a useful technique where you program in groups of 2 (or more, sometimes)

One person is typing, of course, but others are watching and helping to figure things out and make suggestions

It’s tiring being the one typing and you should change things up with some frequency

This is a good way to share experience when one of the pair is more experienced than the other

Page 21: Untangling spring week8

Front end versus back end

Front-End programming Anything that runs in the user’s browser Client code and the graphics that are used to deliver the end-user experience Everything we have done in the course so far, with the possible exception of

google maps where you were using someone else’s back end Back-End programming

Server side code Databases Anything that is not running on the user’s machine

Page 22: Untangling spring week8

Web server and backends

A web server can serve up pages to the user’s browser and not have any other backend code

It can also run code on the backend that determines what it sends to the browser, but to date we have not done this

Page 23: Untangling spring week8

Build environment and packages

LOTS of decisions Node.JS NPM Webpack Express React, Angular, etc.

The point isn’t to scare you, but just to illustrate some of the things that could be thought about

Page 24: Untangling spring week8

Cory House class introduction

http://www.bitnative.com/2016/11/12/building-a-javascript-development-environment-live-on-pluralsight/

Longer version: https://www.youtube.com/watch?v=QGCWal_JWek&feature=player_emb

edded

Page 25: Untangling spring week8
Page 26: Untangling spring week8

Example walkthrough of a project

Don’t worry much about the content of the project NPM, webpack, and a library called A-frame

https://github.com/Jon-Biz/simple-static-react-aframe Local machine

npm run dev http://localhost:4000/

Webserver npm run build http://cspubl.uvic.ca/~dev00/node/simple-static-react-aframe/public/

Page 27: Untangling spring week8

Project 3

Project 3 is to hook up some of the back-end pieces This can be using a database, it can be creating an authentication layer for your

website, it can be using a web service I suspect most of you will focus on a database, just because it is the easiest

example and everyone generally needs one It is possible to use a database or web service without writing any server-side

code. This isn’t a real back-end, but involved many of the same skills. If you do this you must use JSON to convey data from a backend, even if it is not one

that you have written yourself Creating a server-side build environment can also satisfy this goal We’ll formally assign project 3 next week when we cover databases

Page 28: Untangling spring week8

Homework 8

This one is a written homework rather than a coding homework I still want you to check your answers into your github, though Create a new project repository called “programming resources” and

make at least 2 subdirectories for categories of resource The resources themselves can be simply links and descriptions in text

files Make sure you answer the questions on the following page in sufficient

detail to convince me that you understand the question Please send me a link to the repo by class time on March 8th

Page 29: Untangling spring week8

Homework 8 questions

What is a backend server? What are 3 good resources for understanding servers? What do you specifically like about those resources?

What is an SQL versus a noSQL database? Why is one preferable to another? Find 2 good blog entries or courses on how to get started with SQL and tell me what you like about them.

Where do you go to find help on javascript questions? Let’s say you want to find information on how promises work in ES6. What does that mean? Make a list of at least 3 resources you consulted in finding that answer.

Imagine you are working on a problem with using git to merge files from another contributor on your project. What resources can you find to help you understand git merge? On your system, what editor gets launched to show merges? How do you use it to edit text, save, and exit?