Node.js Role in Frontend Development

Transcript

1. July 14, 2016 Node.js Introduction and Role in Frontend Development
2. July 14, 2016 Julián Duque Support Manager - Node.js Collaborator - Community Organizer @julian_duque / github.com/julianduque
3. © 2016 NodeSource 3
4. © 2016 NodeSource What is Node.js? 4 Node.js is a JavaScript Runtime built on Chrome’s V8 engine
5. © 2016 NodeSource What is Node.js? 5 Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient
6. © 2016 NodeSource What is Node.js? 6 Node.js package ecosystem, npm, is the largest ecosystem of open source libraries in the world
7. © 2016 NodeSource What is Node.js? 7 Node.js is not a language
8. © 2016 NodeSource What is Node.js? 8 Node.js is not a framework
9. © 2016 NodeSource What is Node.js? 9 Who is using Node.js?
10. © 2016 NodeSource What is Node.js? 10 and many more…
11. © 2016 NodeSource What is Node.js? 11 Why Node.js?
12. © 2016 NodeSource What is Node.js? 12 Memory vs I/O I/O is Expensive!
13. © 2016 NodeSource What is Node.js? 13 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
14. © 2016 NodeSource What is Node.js? 14 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!
15. © 2016 NodeSource What is Node.js? 15 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
16. © 2016 NodeSource What is Node.js? 16 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
17. © 2016 NodeSource What is Node.js? 17 Event-Driven, Non-Blocking Programming
18. © 2016 NodeSource What is Node.js? 18 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
19. © 2016 NodeSource What is Node.js? 19 “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
20. © 2016 NodeSource What is Node.js? 20 Node.js Philosophy
21. © 2016 NodeSource What is Node.js? 21 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
22. © 2016 NodeSource What is Node.js? 22 Small Core, Vibrant Ecosystem
23. © 2016 NodeSource 23
24. © 2016 NodeSource npm 24 npm is package manager for JavaScript and represents the vibrant ecosystem (userland)
25. © 2016 NodeSource npm 25 A lot of front-end tools and libraries can be found in npm
26. © 2016 NodeSource npm 26 Popular Libraries • jquery • bootstrap • handlebars • react • angular / angular2 • ember-cli
27. © 2016 NodeSource npm 27 Popular Tools • uglify-js • minify • imagemin • js-beautify • watch • livereload
28. © 2016 NodeSource npm 28 Power Tools • browserify • babel
29. © 2016 NodeSource npm 29 CSS • less • cssnext • node-sass • postcss
30. © 2016 NodeSource npm 30 Testing Tools • mocha • chai • sinon • karma • jasmine
31. © 2016 NodeSource Task Runners 31
32. © 2016 NodeSource Task Runners 32 • Grunt - http://gruntjs.com (Configuration) • Gulp - http://gulpjs.com (Programming using Streams) • webpack - https://webpack.github.io (Configuration)
33. © 2016 NodeSource npm 33 “For my presentation today, I’m going to do some live coding… again”
34. © 2016 NodeSource Backend for Frontend 34
35. © 2016 NodeSource Backend for Frontend (BFF) 35
36. © 2016 NodeSource Backend for Frontend (BFF) 36 Main Uses • Server Side Rendering • Public API Layer • Realtime Services
37. © 2016 NodeSource Backend for Frontend (BFF) 37 Server Side Rendering • reactjs/express-react-views • ember-cli-fastboot • airbnb/hypernova • build your own (?)
38. Thank you. Julián Duque julian@nodesource.com @julian_duque