Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Modern UI
Development
With Node.js
@bittersweetryan
1990 1991
Sir Tim Berners-Lee
writes HTML, URI, and
HTTP
Worlds first web page
launched
CSS
Re
2011
e Brehm coins the
m “isomorphic”
om/isomorphic-javascript-future-web-apps/
2015
Michael Jackson says
“universal” is b...
<code>
Step	
  0
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...
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
ES6
ES2015
What is the first thing developers do
when they start coding in a new
project?
⌘+c
⌘+v
⌘+c
Babel now!
classes
ui components as classes
These aren’t even mixins!
They should be modules!
UI components are modules
<build>
The build
pipeline is the
foundation
modern UI
projects are
built on.
http://mdti.net/wp-content/uploads/2014/10/exterior-...
Your build chain is your development lifeline.
Treat it accordingly
Each step is a module.
Each module does one thing
(demo)
If you have to require more than one
plugin you might want to create another module.
Rule of thumb
Tip!
Save your globs in a separate JSON file and
require them into your build modules.
Use your build
tool to automate
mundane tasks.
http://www.companiesandmarkets.com/Content/DynamicMedia/cms-uploaded/X-2014...
testing
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
Code	
  Quality
eslint
Why lint?
catch common errors
catch oops moments (console.log, debugger)
Why eslint?
Style checker
Pluggable
Future friendly: ES6, JSX
configure rules [ignore, warn, error]
csslint
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.files.wordpress.com/2013/12/gc-nope.png
How?
push hooks
http://www.sitepoint.com/introduction-git-hooks/
pre-commit
pre-push
pre-rebase
commit-msg
post-update
post-checkout
post-...
http://www.sitepoint.com/introduction-git-hooks/
pre-commit
pre-push
pre-rebase
commit-msg
post-update
post-checkout
post-...
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
<serve>
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
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
fire & forget...
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?
RESTful API’s
RESTful API’s
JavaScript
Isomorphic!
Unimorphic!
Isomorual!
Universal!
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.
Don’t
Do
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
Eac
Node code vs Browser code
Client code is bundled, node code isn’t.
Why not run bundles in Node?
It only takes a few configuration tweaks
http://jlongster.com/Backend-Apps-with-Webpack--Part-I
0) Collect your node_modules
Not a “hot” code path
1) Add another config to webpack.config.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
No css
$> node build/server.js
Next level
Stuff
Weback dev server & hot module
swapping.
(demo)
Last thoughts…
Start Small When Transitioning
There are lots of learnings to be had from a single page
Legacy
ServiceServiceService
Routing Layer
( /path match )
Node
Iterate on Modules
Modules don’t have to be perfect at first
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.
http://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-
web--webdesign-8710
http://www.evolutionoftheweb...
Questions?
Thank You.
ranklam@netflix.com
ryan.anklam@gmail.com
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Modern UI Development With Node.js
Upcoming SlideShare
Loading in …5
×

Modern UI Development With Node.js

61,059 views

Published on

The Node.js movement has transformed the landscape of UI development. In this session we'll look at how Node.js can be leveraged on multiple layers of the web application development lifecycle. Attendees will learn how incorporating Node.js into your front-end build process can optimize code, allow you to use use new and upcoming JavaScript features in your code today, and to improve your asset delivery pipeline. This session will also cover how Node is changing the template rendering landscape, allowing developers to write "isomorphic" code that runs on the client and server. Lastly we'll look into using Node to achieve developer zen by keeping the codebase clean and limiting the risk of changes to the code causing unknown errors.

Published in: Software, Internet
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How You Can Go From Dead Broke To Abundantly Wealthy By Using One Simple Mind Hack... ♣♣♣ https://bit.ly/2mganVe
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • FREE TRAINING: "How to Earn a 6-Figure Side-Income Online" ... ➤➤ https://tinyurl.com/y3ylrovq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Modern UI Development With Node.js

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

×