World Wild Web Development -Workshop

readme.md

World Wild Web Development.

MDH Västerås, 10 november 2015.

Purpose.

tl;dr.

To give an overview of the technologies used in today's node.js web development.

Details

We will cover:

• Source control. (Important.)
• Packaging code. (Important.)
• Working with 3rd party modules.
• Node.js web server.
• Single Page Applications.
• Backend automated testing.
• Cloud deploys. (Important.)

We will not cover:

• Javascript fundamentals.
• Databases and ORMs.
• Frontend automated testing.

The session will be about 50/50 split between lecture/workshop/confusion ;-)

Session resources

• Livecoding: https://www.livecoding.tv/marcusnielsen/ . Let's hope it works! I've never tried it before.
• Code repository: https://github.com/marcusnielsen/mn-labs-wild-development . Will be updated before or during the code session.
• This readme file: https://gist.github.com/marcusnielsen/0ad893bc56ddd5855882 .

Setup.

• Create a github account & Install git(hub for windows).
• Install node.
• Create a heroku account & install CLI.
• Open a terminal.
• Check versions for all four command line interfaces (CLIs). If you got version descriptions back from all, you are OK.

node -v
npm -v
git --version
heroku --version

• Self-organize a chat for us to use for questions.

Buzzword bingo.

• Angular vs React.
• ASP.NET vs Node.
• Java vs JavaScript.
• Server side page vs SPA.
• Native vs Hybrid.
• Callback vs Promise vs FRP.
• TDD vs “Ain’t nobody got time for that”.
• Reational DB vs document DB vs Graph DB.
• Subversion vs Git.
• Npm scripts for build tools.
• Browserify with babelify for building JavaScript code.
• Tape for testing.
• ESLint for style checking.
• GitHub for code hosting and issue tracking.
• Heroku for web app hosting.
• Dotenv for environment variables.

Git(hub)

• Master -> Production server
• Development -> Development server
• Feature-User-Routes -> Local server

Most problems are solved by making smaller and more isolated features.

• http://nvie.com/posts/a-successful-git-branching-model/
• https://www.atlassian.com/git/
• https://help.github.com/articles/generating-ssh-keys/#platform-windows

Git repository.

• Create repo(sitory) on github.
• Git clone in terminal. Use the github link on the right hand side.
• Code stuff.
• Stage, commit, and push to github.

Github pull request.

• Create issue.
• Create a new local branch.
• Commit with --allow-empty.
• Push to origin (github).
• Create pull request on github.
• Pull request refers to issue number (example: #123).
• Code review by collegue.
• Squash commits and rebase on origin/development.
• Merge and close pull request.
• Close issue.

Git commands.

git status
git add .
git status
git commit -m “Adds the my-component.”
git status
git push
git status

git rebase

git reset --hard origin/master

cp my-project/ _bkp-my-project/

Project setup.

• npm i -S express eslint browserify babelify .
• Browserify for managing frontend javascript.
• ESLint for code style checking.
• Watchers for faster development.
• Automated tests for stable (low risk) development.

Express static server.

Avoid direct use of generators (such as Yeoman).

Hello World

• http://expressjs.com/starter/hello-world.html
• app.use('/static', express.static('public'));
• http://expressjs.com/starter/static-files.html

Preparing the client.

• Copy index.html to build folder.
• Build javascript with browserify.
• Bootswatch (bootstrap themes) via CDN.