Downloaded 332 times
![Why eslint?
Style checker
Pluggable
Future friendly: ES6, JSX
configure rules [ignore, warn, error]](https://image.slidesharecdn.com/modernuidevelopment-150818190720-lva1-app6892/85/Modern-UI-Development-With-Node-js-51-320.jpg)
![Why eslint?
Style checker
Pluggable
Future friendly: ES6, JSX
configure rules [ignore, warn, error]](https://image.slidesharecdn.com/modernuidevelopment-150818190720-lva1-app6892/75/Modern-UI-Development-With-Node-js-51-2048.jpg)
Uploaded byRyan Anklam
Modern UI Development With Node.js
The document discusses modern UI development with Node.js, emphasizing the importance of modules, build pipelines, and automated testing for clean, efficient code. It touches on the challenges of isomorphic JavaScript and the cost of context switching in development, highlighting the need for careful architecture and organization. The author also encourages a culture of testing and linting to maintain code quality and suggests automating processes to improve developer efficiency.
In this document
Powered by AI
Introduces the topic of modern UI development using Node.js and the presenter.
Highlights key milestones in web development history, including HTML, URI, HTTP, and isomorphic JavaScript.
Discusses the use of modules in JavaScript, including ES6 and CommonJS module systems and their implications.
Emphasizes the importance of code quality, standard practices like copy-pasting, and the need for Babel in modern projects.
Focuses on the significance of classes in UI components, build pipelines, and automating tasks using build tools.
Advocates for testing as part of the development process, including linting and the importance of making testing easy.
Explains the necessity of linting for code quality and using Git hooks to enforce coding standards.
Encourages continuous linting and testing within the build process for improved code quality.
Details on RESTful APIs, including server-side JavaScript, business logic, and challenges in data management.
Discusses using Webpack and Browserify for managing Node and client code differences with build configurations.
Wraps up the talk with recommendations for transitioning to modern practices, focusing on clean code and automation.
Conclusion of the presentation with a Q&A session and thank you note from the presenter.
More Related Content
Similar to Modern UI Development With Node.js
Modern UI Development With Node.js
- 1.
- 2.
- 5. 1990 1991 Sir TimBerners-Lee writes HTML, URI, and HTTP Worlds first web page launched CSS Re
- 6. 2011 e Brehm coinsthe m “isomorphic” om/isomorphic-javascript-future-web-apps/ 2015 Michael Jackson says “universal” is better https://medium.com/@mjackson/universal-javascript-4761051b7ae9
- 7.
- 8.
- 9.
- 10. An IIFE isnot a module! ES6 or CommonJS
- 11. ES6 Modules ECMA spec browserswill (eventually) implement strict mode default named exports and imports
- 12. ES6 Modules spec hadbeen under churn browser support coming along slowly transpolation can get messy cannot conditionally load them
- 13. CommonJS Node.js default modulesystem A single syntax for all the modules conditional loading
- 14. CommonJS No strict modedefault different syntax for browser and node conditional loading is a double edge sword
- 15. The code you writetoday is the code that will be copied tomorrow. https://pixabay.com/p-26556/?no_redirect
- 16.
- 17.
- 18. What is thefirst thing developers do when they start coding in a new project?
- 20.
- 21.
- 22.
- 23.
- 24. ui components asclasses
- 27. These aren’t evenmixins!
- 28. They should bemodules!
- 29. UI components aremodules
- 33.
- 34. The build pipeline isthe foundation modern UI projects are built on. http://mdti.net/wp-content/uploads/2014/10/exterior-wall-crack-cropped.jpg
- 35. Your build chainis your development lifeline. Treat it accordingly
- 36. Each step isa module.
- 37. Each module doesone thing (demo)
- 38. If you haveto require more than one plugin you might want to create another module. Rule of thumb
- 39. Tip! Save your globsin a separate JSON file and require them into your build modules.
- 40. Use your build toolto automate mundane tasks. http://www.companiesandmarkets.com/Content/DynamicMedia/cms-uploaded/X-20140605161048330.jpg
- 41.
- 42.
- 43. Test as youcode
- 44. Test as youcode Test before you push
- 45. Test as youcode Test before you push Test in you CI Server
- 46. Tip! Make testing easyand people will do it.
- 47. Easy is… fast automated easy tobootstrap having a culture of testing
- 48.
- 49.
- 50. Why lint? catch commonerrors catch oops moments (console.log, debugger)
- 51. Why eslint? Style checker Pluggable Futurefriendly: ES6, JSX configure rules [ignore, warn, error]
- 52.
- 53. Nesting is the worstthing to happen to CSS.
- 54. You should neversee this in css!
- 55. Don’t let lint errorsin your repos. https://odetojoandkatniss.files.wordpress.com/2013/12/gc-nope.png
- 56.
- 57.
- 58. http://www.sitepoint.com/introduction-git-hooks/ pre-commit pre-push pre-rebase commit-msg post-update post-checkout post-merge For GIT Add thesefiles to your .git directory’s hooks folder
- 59.
- 60.
- 62. Continuously Lint &Test Add your testing and linting as part of the build process and in your CI tool.
- 63. Public shaming is agreat motivator.
- 64.
- 66.
- 67. business logic, maybesome sql
- 68. business logic, maybesome sql php/jsp/asp/erb/etc
- 69. business logic, maybesome sql php/jsp/asp/erb/etc run some JS on the client
- 70.
- 71. RESTful API’s JS templateon the server
- 72. RESTful API’s JS templateon the server interactive JS on the client
- 73. There is alarge cost to context switching.
- 74. Proceed with Caution! Letnode do what it’s good at, nothing more. Don’t block Don’t implement business logic fire & forget, take advantage of the message queue
- 75. Make calls toasync services Compose a template Send the response
- 76. Some things haveto be synchronous. Keep as many of those at startup as you can.
- 77. Be aware ofthe “hot” path! Code that will run with EVERY request.
- 78. Keep your functionalprogramming off the hot path.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86. Don’t let thedemos fool you! Universal JS is hard!
- 87. Calling a templatewith some data to produce HTML is easy
- 88. De-hydrating data inNode and re-hydrating client in the browser is HARD.
- 89. Getting your datacan be really hard.
- 90.
- 91.
- 92. Use meta datato tell other modules what data the UI needs.
- 93. In React, staticsare perfect for this.
- 95.
- 96.
- 97.
- 99.
- 100. Node code vsBrowser code Client code is bundled, node code isn’t.
- 101. Why not runbundles in Node? It only takes a few configuration tweaks http://jlongster.com/Backend-Apps-with-Webpack--Part-I
- 102. 0) Collect yournode_modules
- 104. Not a “hot”code path
- 105. 1) Add anotherconfig to webpack.config.js
- 106.
- 107.
- 108. 2) Tell webpack to ignore your requires for node_modules AND your CSS
- 109.
- 110.
- 111.
- 112.
- 113. Weback dev server& hot module swapping. (demo)
- 114.
- 115. Start Small WhenTransitioning There are lots of learnings to be had from a single page
- 116.
- 117. Iterate on Modules Modulesdon’t have to be perfect at first learn & refactor
- 118. Keep your codeclean Don’t let bad code infect your repository.
- 119. Automate People are lazy.They will do the easy things and ignore the hard things.
- 120.
- 121.
- 122.