Modern UI Development With Node.js
-
Upload
ryan-anklam -
Category
Software
-
view
1.101 -
download
1
Transcript of Modern UI Development With Node.js
![Page 1: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/1.jpg)
Modern UI Development
With Node.js
![Page 2: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/2.jpg)
@bittersweetryan
![Page 3: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/3.jpg)
![Page 4: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/4.jpg)
![Page 5: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/5.jpg)
1990 1991
Sir Tim Berners-Lee writes HTML, URI, and
HTTP
Worlds first web page launched
CSS becomes W3C Recommendation
![Page 6: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/6.jpg)
2011
Spike Brehm coins the term “isomorphic”
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
2015
Michael Jackson says “universal” is better
https://medium.com/@mjackson/universal-javascript-4761051b7ae9
![Page 7: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/7.jpg)
<code>
![Page 8: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/8.jpg)
Step 0
![Page 9: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/9.jpg)
Use. Modules.
http://mattsbrickgallery.tumblr.com/post/48739663720
![Page 10: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/10.jpg)
An IIFE is not a module!
ES6 or CommonJS
![Page 11: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/11.jpg)
ES6 ModulesECMA spec
browsers will (eventually) implement strict mode default
named exports and imports
![Page 12: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/12.jpg)
ES6 Modulesspec had been under churn
browser support coming along slowly transpolation can get messy
cannot conditionally load them
![Page 13: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/13.jpg)
CommonJSNode.js default module system
A single syntax for all the modules conditional loading
![Page 14: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/14.jpg)
CommonJSNo strict mode default
different syntax for browser and node conditional loading is a double edge sword
![Page 15: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/15.jpg)
The code you write today is
the code that will be copied tomorrow.
https://pixabay.com/p-26556/?no_redirect
![Page 16: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/16.jpg)
ES6
![Page 17: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/17.jpg)
ES2015
![Page 18: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/18.jpg)
What is the first thing developers do when they start coding in a new
project?
![Page 19: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/19.jpg)
⌘+v⌘+c
![Page 20: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/20.jpg)
⌘+v
⌘+c
![Page 21: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/21.jpg)
⌘+v⌘+c
![Page 22: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/22.jpg)
Babel now!
![Page 23: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/23.jpg)
classes
![Page 24: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/24.jpg)
ui components as classes
![Page 25: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/25.jpg)
![Page 26: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/26.jpg)
![Page 27: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/27.jpg)
These aren’t even mixins!
![Page 28: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/28.jpg)
They should be modules!
![Page 29: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/29.jpg)
UI components are modules
![Page 30: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/30.jpg)
![Page 31: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/31.jpg)
![Page 32: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/32.jpg)
![Page 33: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/33.jpg)
<build>
![Page 34: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/34.jpg)
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
![Page 35: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/35.jpg)
Your build chain is your development lifeline.
Treat it accordingly
![Page 36: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/36.jpg)
Each step is a module.
![Page 37: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/37.jpg)
Each module does one thing (demo)
![Page 38: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/38.jpg)
If you have to require more than one plugin you might want to create another module.
Rule of thumb
![Page 39: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/39.jpg)
Tip!Save your globs in a separate JSON file and
require them into your build modules.
![Page 40: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/40.jpg)
Use your build tool to automate mundane tasks.
http://www.companiesandmarkets.com/Content/DynamicMedia/cms-uploaded/X-20140605161048330.jpg
![Page 41: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/41.jpg)
testing
![Page 42: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/42.jpg)
just do it
![Page 43: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/43.jpg)
Test as you code
![Page 44: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/44.jpg)
Test as you code
Test before you push
![Page 45: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/45.jpg)
Test as you code
Test before you push
Test in you CI Server
![Page 46: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/46.jpg)
Tip! Make testing easy and people will do it.
![Page 47: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/47.jpg)
Easy is… fast automated easy to bootstrap having a culture of testing
![Page 48: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/48.jpg)
Code Quality
![Page 49: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/49.jpg)
eslint
![Page 50: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/50.jpg)
Why lint? catch common errors
catch oops moments (console.log, debugger)
![Page 51: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/51.jpg)
Why eslint? Style checker
Pluggable Future friendly: ES6, JSX
configure rules [ignore, warn, error]
![Page 52: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/52.jpg)
csslint
![Page 53: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/53.jpg)
Nesting is the worst thing to happen to CSS.
![Page 54: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/54.jpg)
You should never see this in css!
![Page 55: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/55.jpg)
Don’t let lint errors in your
repos.
https://odetojoandkatniss.files.wordpress.com/2013/12/gc-nope.png
![Page 56: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/56.jpg)
How?
![Page 57: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/57.jpg)
push hooks
![Page 58: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/58.jpg)
http://www.sitepoint.com/introduction-git-hooks/
pre-commit pre-push
pre-rebase commit-msg post-update
post-checkout post-merge
For GITAdd these files to your .git directory’s hooks folder
![Page 59: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/59.jpg)
http://www.sitepoint.com/introduction-git-hooks/
pre-commit pre-pushpre-rebase
commit-msg post-update
post-checkout post-merge
This is your “Nope” button
![Page 60: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/60.jpg)
git push --no-verify
![Page 61: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/61.jpg)
![Page 62: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/62.jpg)
Continuously Lint & Test Add your testing and linting
as part of the build process and in your CI tool.
![Page 63: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/63.jpg)
Public shaming is a great motivator.
![Page 64: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/64.jpg)
Automate Adding Hooks
![Page 65: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/65.jpg)
![Page 66: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/66.jpg)
<serve>
![Page 67: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/67.jpg)
business logic, maybe some sql
![Page 68: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/68.jpg)
business logic, maybe some sql
php/jsp/asp/erb/etc
![Page 69: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/69.jpg)
business logic, maybe some sql
php/jsp/asp/erb/etc
run some JS on the client
![Page 70: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/70.jpg)
RESTful API’s
![Page 71: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/71.jpg)
RESTful API’s
JS template on the server
![Page 72: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/72.jpg)
RESTful API’s
JS template on the server
interactive JS on the client
![Page 73: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/73.jpg)
There is a large cost to context switching.
![Page 74: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/74.jpg)
Proceed with Caution! Let node do what it’s good at, nothing more.
Don’t block Don’t implement business logic
fire & forget, take advantage of the message queue
![Page 75: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/75.jpg)
Make calls to async services Compose a template Send the response
![Page 76: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/76.jpg)
Some things have to be synchronous.
Keep as many of those at startup as you can.
![Page 77: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/77.jpg)
Be aware of the “hot” path!
Code that will run with EVERY request.
![Page 78: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/78.jpg)
Keep your functional programming off the hot path.
![Page 79: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/79.jpg)
But what if?
![Page 80: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/80.jpg)
RESTful API’s
![Page 81: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/81.jpg)
RESTful API’s
JavaScript
![Page 82: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/82.jpg)
Isomorphic!
![Page 83: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/83.jpg)
Unimorphic!
![Page 84: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/84.jpg)
Isomorual!
![Page 85: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/85.jpg)
Universal!
![Page 86: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/86.jpg)
Don’t let the demos fool you! Universal JS is hard!
![Page 87: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/87.jpg)
Calling a template with some data to produce HTML is easy
![Page 88: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/88.jpg)
De-hydrating data in Node and re-hydrating client in the browser is
HARD.
![Page 89: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/89.jpg)
Getting your data can be really hard.
![Page 90: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/90.jpg)
Don’t
![Page 91: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/91.jpg)
Do
![Page 92: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/92.jpg)
Use meta data to tell other modules what data the UI needs.
![Page 93: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/93.jpg)
In React, statics are perfect for this.
![Page 94: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/94.jpg)
![Page 95: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/95.jpg)
Bind Falkor paths
![Page 96: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/96.jpg)
Load i18n strings
![Page 97: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/97.jpg)
Webpack & Browserify
![Page 98: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/98.jpg)
![Page 99: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/99.jpg)
Eac
![Page 100: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/100.jpg)
Node code vs Browser code Client code is bundled, node code isn’t.
![Page 101: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/101.jpg)
Why not run bundles in Node? It only takes a few configuration tweaks
http://jlongster.com/Backend-Apps-with-Webpack--Part-I
![Page 102: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/102.jpg)
0) Collect your node_modules
![Page 103: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/103.jpg)
![Page 104: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/104.jpg)
Not a “hot” code path
![Page 105: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/105.jpg)
1) Add another config to webpack.config.js
![Page 106: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/106.jpg)
Export an array
![Page 107: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/107.jpg)
Have multiple targets
![Page 108: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/108.jpg)
2) Tell web pack to ignore your requires for node_modules AND your CSS
![Page 109: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/109.jpg)
No Node node_modules
![Page 110: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/110.jpg)
No css
![Page 111: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/111.jpg)
$> node build/server.js
![Page 112: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/112.jpg)
Next level Stuff
![Page 113: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/113.jpg)
Weback dev server & hot module swapping.
(demo)
![Page 114: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/114.jpg)
Last thoughts…
![Page 115: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/115.jpg)
Start Small When Transitioning There are lots of learnings to be had from a single page
![Page 116: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/116.jpg)
Legacy ServiceServiceService
Routing Layer ( /path match )
Node
![Page 117: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/117.jpg)
Iterate on Modules Modules don’t have to be perfect at first
learn & refactor
![Page 118: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/118.jpg)
Keep your code clean Don’t let bad code infect your repository.
![Page 119: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/119.jpg)
Automate People are lazy. They will do the easy things and
ignore the hard things.
![Page 120: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/120.jpg)
http://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710
http://www.evolutionoftheweb.com/
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
http://jlongster.com/Backend-Apps-with-Webpack--Part-I
References
![Page 121: Modern UI Development With Node.js](https://reader034.fdocuments.in/reader034/viewer/2022042717/55d6db7ebb61eb863f8b4635/html5/thumbnails/121.jpg)
Questions?