Modern UI Development With Node.js
Worlds ﬁrst web page launched Sir Tim Berners-Lee writes HTML, URI, and HTTP 1990 CSS Re 1991
Use. Modules. http://mattsbrickgallery.tumblr.com/post/48739663720
An IIFE is not a module! ES6 or CommonJS
ES6 Modules ECMA spec browsers will (eventually) implement strict mode default named exports and imports
ES6 Modules spec had been under churn browser support coming along slowly transpolation can get messy cannot conditionally load them
CommonJS Node.js default module system A single syntax for all the modules conditional loading
CommonJS No strict mode default different syntax for browser and node conditional loading is a double edge sword
The code you write today is the code that will be copied tomorrow. https://pixabay.com/p-26556/?no_redirect
What is the ﬁrst thing developers do when they start coding in a new project?
ui components as classes
These aren’t even mixins!
They should be modules!
UI components are modules
The build pipeline is the foundation modern UI projects are built on. http://mdti.net/wp-content/uploads/2014/10/exterior-wall-crack-cropped.jpg
Your build chain is your development lifeline. Treat it accordingly
Each step is a module.
Each module does one thing (demo)
Rule of thumb If you have to require more than one plugin you might want to create another module.
Tip! Save your globs in a separate JSON ﬁle and require them into your build modules.
Use your build tool to automate mundane tasks. http://www.companiesandmarkets.com/Content/DynamicMedia/cms-uploaded/X-20140605161048330.jpg
just do it
Test as you code
Test as you code Test before you push
Test as you code Test before you push Test in you CI Server
Tip! Make testing easy and people will do it.
Easy is… fast automated easy to bootstrap having a culture of testing
Why lint? catch common errors catch oops moments (console.log, debugger)
Why eslint? Style checker Pluggable Future friendly: ES6, JSX conﬁgure rules [ignore, warn, error]
Nesting is the worst thing to happen to CSS.
You should never see this in css!
Don’t let lint errors in your repos. https://odetojoandkatniss.ﬁles.wordpress.com/2013/12/gc-nope.png
For GIT Add these ﬁles to your .git directory’s hooks folder pre-commit pre-push pre-rebase commit-msg post-update post-checkout post-merge http://www.sitepoint.com/introduction-git-hooks/
This is your “Nope” button pre-commit pre-push pre-rebase commit-msg post-update post-checkout post-merge http://www.sitepoint.com/introduction-git-hooks/
git push --no-verify
Continuously Lint & Test Add your testing and linting as part of the build process and in your CI tool.
Public shaming is a great motivator.
Automate Adding Hooks
business logic, maybe some sql
business logic, maybe some sql php/jsp/asp/erb/etc
business logic, maybe some sql php/jsp/asp/erb/etc run some JS on the client
RESTful API’s JS template on the server
RESTful API’s JS template on the server interactive JS on the client
There is a large cost to context switching.
Proceed with Caution! Let node do what it’s good at, nothing more. Don’t block Don’t implement business logic ﬁre & forget, take advantage of the message queue
Make calls to async services Compose a template Send the response
Some things have to be synchronous. Keep as many of those at startup as you can.
Be aware of the “hot” path! Code that will run with EVERY request.
Keep your functional programming off the hot path.
But what if?
Don’t let the demos fool you! Universal JS is hard!
Calling a template with some data to produce HTML is easy
De-hydrating data in Node and re-hydrating client in the browser is HARD.
Getting your data can be really hard.
Use meta data to tell other modules what data the UI needs.
In React, statics are perfect for this.
Bind Falkor paths
Load i18n strings
Webpack & Browserify
Node code vs Browser code Client code is bundled, node code isn’t.
Why not run bundles in Node? It only takes a few conﬁguration tweaks http://jlongster.com/Backend-Apps-with-Webpack--Part-I
0) Collect your node_modules
Not a “hot” code path
1) Add another conﬁg to webpack.conﬁg.js
Export an array
Have multiple targets
2) Tell web pack to ignore your requires for node_modules AND your CSS
No Node node_modules
$> node build/server.js
Next level Stuff
Weback dev server & hot module swapping. (demo)
Start Small When Transitioning There are lots of learnings to be had from a single page
Routing Layer ( /path match ) Node Legacy Service Service Service
Iterate on Modules Modules don’t have to be perfect at ﬁrst learn & refactor
Keep your code clean Don’t let bad code infect your repository.
Automate People are lazy. They will do the easy things and ignore the hard things.