Node.js - Introduction and role in Frontend Development
1 like343 views
This document discusses Node.js and its role in frontend development. It describes Node.js as a JavaScript runtime built on Chrome's V8 engine that uses an event-driven and non-blocking I/O model. It notes that npm is the largest ecosystem of open source JavaScript libraries in the world. Common uses of Node.js for frontend development include server-side rendering, public APIs, and real-time services through a backend for frontend architecture. Popular frontend tools, libraries, and frameworks can be found and used via npm.
Ad
More Related Content
What's hot (20)
Similar to Node.js - Introduction and role in Frontend Development (20)
Ad
More from Julián David Duque (6)
Ad
Recently uploaded (20)
Node.js - Introduction and role in Frontend Development
- 1. May 14, 2018 Node.js Introduction and Role in Frontend Development
- 2. May 14, 2018 Julián Duque Solutions Architect - Node.js Collaborator - Community Organizer @julian_duque / github.com/julianduque
- 4. © 2018 NodeSource What is Node.js? 4 Node.js is a JavaScript Runtime built on Chrome’s V8 engine
- 5. © 2018 NodeSource What is Node.js? 5 Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient
- 6. © 2018 NodeSource What is Node.js? 6 Node.js package ecosystem, npm, is the largest ecosystem of open source libraries in the world
- 7. © 2018 NodeSource What is Node.js? 7 Node.js is not a language
- 8. © 2018 NodeSource What is Node.js? 8 Node.js is not a framework
- 9. © 2018 NodeSource What is Node.js? 9 Who is using Node.js?
- 10. © 2018 NodeSource10 A Few NodeSource Customers…
- 11. © 2018 NodeSource11 A Few More NodeSource Customers…
- 12. © 2018 NodeSource What is Node.js? 12 and many more…
- 13. © 2018 NodeSource What is Node.js? 13 Why Node.js?
- 14. © 2018 NodeSource What is Node.js? 14 Memory vs I/O I/O is Expensive!
- 15. © 2018 NodeSource What is Node.js? 15 Blocking vs Non-Blocking console.log('Fetching article...') var result = query("SELECT * FROM articles WHERE id = 1") console.log('Here is the result:', result) On typical programming platforms, performing I/O is a blocking operation
- 16. © 2018 NodeSource What is Node.js? 16 Waiting for I/O is a Waste While waiting for I/O, your program is unable to do any other work This is a huge waste of resources!
- 17. © 2018 NodeSource What is Node.js? 17 I/O is usually hidden System.out.println("Reading file..."); BufferedReader br = new BufferedReader(new FileReader("in.txt")); try { StringBuilder sb = new StringBuilder(); String line; while ((line = br.readLine()) != null) sb.append(line + "n"); System.out.print(sb.toString()); } finally { br.close(); } System.out.println("Finished reading file!"); On typical programming platforms, I/O operations are obscured amongst non-I/O operations
- 18. © 2018 NodeSource What is Node.js? 18 Treat I/O as a Special Case Performing I/O is not the same as executing business logic We should not treat them the same
- 19. © 2018 NodeSource What is Node.js? 19 Event-Driven, Non-Blocking Programming
- 20. © 2018 NodeSource What is Node.js? 20 function handleResult(result) { console.log('Here is the result:', result) } select('SELECT * FROM articles WHERE id = 1', handleResult) console.log('Fetching article...') Don’t block on I/O Continue executing code Listen for an event (result is ready) When the event is triggered, perform operations on the result
- 21. © 2018 NodeSource What is Node.js? 21 “For my presentation today, I’m going to do some live coding” http://nodejsreactions.tumblr.com/post/68275292840/for-my-presentation-today-im-going-to-do-some
- 22. © 2018 NodeSource What is Node.js? 22 Node.js Philosophy
- 23. © 2018 NodeSource What is Node.js? 23 Node.js is Minimal Instead of providing a big framework, Node.js provides the minimum viable library for doing I/O All the rest is built on top of this in user-land This allows Node.js core to evolve independently
- 24. © 2018 NodeSource What is Node.js? 24 Small Core, Vibrant Ecosystem
- 26. © 2018 NodeSource npm 26 npm is package manager for JavaScript and represents the vibrant ecosystem (userland)
- 27. © 2018 NodeSource npm 27 A lot of front-end tools and libraries can be found in npm
- 28. © 2018 NodeSource npm 28 Popular Libraries • jquery • bootstrap • handlebars • react • angular • ember-cli • vue
- 29. © 2018 NodeSource npm 29 Popular Tools • uglify-js • minify • imagemin • js-beautify • watch • livereload
- 30. © 2018 NodeSource npm 30 Power Tools • browserify • babel
- 31. © 2018 NodeSource npm 31 CSS • less • cssnext • node-sass • postcss
- 32. © 2018 NodeSource npm 32 Testing Tools • mocha • chai • sinon • karma • jasmine • jest • ava • cypress
- 33. © 2018 NodeSource Task Runners and Bundlers 33
- 34. © 2018 NodeSource Task Runners and Bundlers 34 • Grunt - http://gruntjs.com (Configuration) • Gulp - http://gulpjs.com (Programming using Streams) • Webpack - https://webpack.github.io (Configuration) • Parcel - https://parceljs.org (Zero Configuration / Convention)
- 35. © 2018 NodeSource npm 35 “For my presentation today, I’m going to do some live coding… again”
- 36. © 2018 NodeSource Backend for Frontend 36
- 37. © 2018 NodeSource Backend for Frontend (BFF) 37
- 38. © 2018 NodeSource Backend for Frontend (BFF) 38 Main Uses • Server Side Rendering • Public API Layer • Realtime Services
- 39. © 2018 NodeSource Backend for Frontend (BFF) 39 Server Side Rendering • reactjs/express-react-views • angular-ssr • vue-server-renderer • ember-cli-fastboot • airbnb/hypernova • build your own (?)