untangling the web, fall 2017. week 7. nodejs, databases, and resources

1. UNTANGLING THE WEB
FALL 2017 WEEK 7 – A DEVELOPER MINDSET, AN INTRODUCTION TO NODEJS,
DATABASES

2. AGENDA
• A developer mindset and how to conquer frustration
• Some resources to draw on
• An introduction to server-side programming
• NodeJS
• Databases
• A Bluemix Cloudant/NodeJS example
• Project 2 work if we have time

3. THIS PART 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

5. 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.

6. 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

7. 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.

8. LIVECODING AND VIDEO LESSONS
• Screencasting is a thing. It’s also 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

9. PLURALSIGHT
• The largest online education site, I think.
• It’s about $300 a year, sometimes a bit less with sales. (Big one is usually right around US thanksgiving.
If you sign up for a trial do so with a throwaway email address so that you’re eligible for new subscriber
discounts.)
• Very good quality content on a wide array of topics ranging from programming to application use to
graphics and creative process
• Get a free 3 month trial by signing up for Microsoft Developer Essentials:
https://www.visualstudio.com/dev-essentials/

10. 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.

11. 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.

12. 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

13. CODE SCHOOL, CODE ACADEMY, ETC.
• https://www.codecademy.com/learn/javascript
• https://www.codeschool.com/learn

14. 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

15. 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

16. WORKING AS A GROUP
• 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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_embedded

26. WE’RE GOING TO SIMPLIFY THIS SET OF DECISIONS
• NodeJS version 6: https://nodejs.org/en/download/
• IBM CLI extensions: https://clis.ng.bluemix.net/ui/home.html
• We’ll use the default stack that Bluemix provides
• (Install the above, you may have to reboot after the IBM install, you’ll certainly have to close and re-
open any terminal windows)
• Try the commands “node –v”, “npm”, “bluemix” (all should work, don’t worry much about the output)

27. VSCODE BUG TO FIX
• In working on the example at the end of this class, I encountered a vscode bug that I had a hard time
tracking down
• The HTML formatter was automatically being invoked on save, and this was introducing an error that
would negatively effect the web page
• That formatter must be turned off on save
• F1 to get to the command pallette
• Type in “formatter config”
• The first line “onSave” should be changed to “false” rather than “true”
• Restart VSCode

28. NODEJS
• This is a server-side framework
• Access databases
• Access filesystems
• Authentication
• Mutiuser applications
• Uses javascript on the server

29. DATABASES
• 2 main varieties – SQL and NoSQL
• SQL – structured query language
• Relational database
• Multiple tables, joins, complex queries
• NoSQL – anything else!
• Usually flat structure
• MongoDB is a popular one
• We’ll be looking at Cloudant, which is an IBM version of the open source CouchDB database

30. CRUD APPLICATION
• https://en.wikipedia.org/wiki/Create,_read,_update_and_delete
• Create
• Read
• Update
• Delete

31. IBM CLOUDANT EXAMPLE
• NodeJS, cloudant, website, routes
• Don’t worry too much about how it’s put together, but more how to get it running
• We’ll go into more detail on the component parts starting next week

36. • Note the lines I added by copying out of package.json!
• This will become relevant for the homework 

38. A QUICK FILE WALKTHROUGH
• Package.json
• Routes
• Html files
• Styling
• Database scripts

39. HOMEWORK 7
• Create your Bluemix account (if you have not already done so) and send me the email under which you
created the account (ideally your uvic email)
• Install the IBM CLI tools and NodeJS version 6
• Install the NodeJS Cloudant DB Web Starter project
• Fix the vscode bug described earlier
• Edit the HTML page at views/index.html to describe what each of the dependencies in package.json does
• Create a new github repository for the project and check all the files in
• Push up to bluemix (using the bluemix command line tools)
• Turn in both a link to the page running on bluemix and a link to your github repository

40. PROJECT 2
• Please ask early if you have any questions
• I am expecting 3-4 nicely styled pages, although any backend functionality can just be placeholders
• I am also expecting a presentation, ideally just using the webpages rather than slides (feel free to add
an additional webpage if you need to explain anything not implemented in the UI, such as your business
model canvas and value proposition canvas.)

41. PROJECT 2 – DUE START OF CLASS OCT 25TH
• Groups of 3-4 (no smaller than 2, no larger than 5)
• You will design and implement a website business
• This website must contain 3-4 html pages, a map (we’ll discuss this next week), a database mockup
(you’ll do the UI only in this project, the database itself will be for project 3), and a chatbot (also for
project 3, but you’ll do the dialog design for this project)

42. PROJECT 2 DELIVERABLES
• A business model canvas and value proposition canvas for your website business
• 3-4 web pages, hosted on github pages, that are styled nicely in CSS
• A half-page discussion of which SEO factors your website exhibits
• A functional map on one of the pages, although it does not have to be completely populated
• A presentation of between 3-5 minutes giving a walkthrough of the website concept
• This project is worth 15% of your mark and all group members will get the same mark. Switching groups
between projects 2 and 3 is discouraged but not impossible.