Tweet
Tweet

Slide 1

Slide 1 text

July 14, 2016 Node.js Introduction and Role in Frontend Development

Slide 2

Slide 2 text

July 14, 2016 Julián Duque Support Manager - Node.js Collaborator - Community Organizer @julian_duque / github.com/julianduque

Slide 3

Slide 3 text

© 2016 NodeSource 3

Slide 4

Slide 4 text

© 2016 NodeSource What is Node.js? 4 Node.js is a JavaScript Runtime built on Chrome’s V8 engine

Slide 5

Slide 5 text

© 2016 NodeSource What is Node.js? 5 Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient

Slide 6

Slide 6 text

© 2016 NodeSource What is Node.js? 6 Node.js package ecosystem, npm, is the largest ecosystem of open source libraries in the world

Slide 7

Slide 7 text

© 2016 NodeSource What is Node.js? 7 Node.js is not a language

Slide 8

Slide 8 text

© 2016 NodeSource What is Node.js? 8 Node.js is not a framework

Slide 9

Slide 9 text

© 2016 NodeSource What is Node.js? 9 Who is using Node.js?

Slide 10

Slide 10 text

© 2016 NodeSource What is Node.js? 10 and many more…

Slide 11

Slide 11 text

© 2016 NodeSource What is Node.js? 11 Why Node.js?

Slide 12

Slide 12 text

© 2016 NodeSource What is Node.js? 12 Memory vs I/O I/O is Expensive!

Slide 13

Slide 13 text

© 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

Slide 14

Slide 14 text

© 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!

Slide 15

Slide 15 text

© 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

Slide 16

Slide 16 text

© 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

Slide 17

Slide 17 text

© 2016 NodeSource What is Node.js? 17 Event-Driven, Non-Blocking Programming

Slide 18

Slide 18 text

© 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

Slide 19

Slide 19 text

© 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

Slide 20

Slide 20 text

© 2016 NodeSource What is Node.js? 20 Node.js Philosophy

Slide 21

Slide 21 text

© 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

Slide 22

Slide 22 text

© 2016 NodeSource What is Node.js? 22 Small Core, Vibrant Ecosystem

Slide 23

Slide 23 text

© 2016 NodeSource 23

Slide 24

Slide 24 text

© 2016 NodeSource npm 24 npm is package manager for JavaScript and represents the vibrant ecosystem (userland)

Slide 25

Slide 25 text

© 2016 NodeSource npm 25 A lot of front-end tools and libraries can be found in npm

Slide 26

Slide 26 text

© 2016 NodeSource npm 26 Popular Libraries • jquery • bootstrap • handlebars • react • angular / angular2 • ember-cli

Slide 27

Slide 27 text

© 2016 NodeSource npm 27 Popular Tools • uglify-js • minify • imagemin • js-beautify • watch • livereload

Slide 28

Slide 28 text

© 2016 NodeSource npm 28 Power Tools • browserify • babel

Slide 29

Slide 29 text

© 2016 NodeSource npm 29 CSS • less • cssnext • node-sass • postcss

Slide 30

Slide 30 text

© 2016 NodeSource npm 30 Testing Tools • mocha • chai • sinon • karma • jasmine

Slide 31

Slide 31 text

© 2016 NodeSource Task Runners 31

Slide 32

Slide 32 text

© 2016 NodeSource Task Runners 32 • Grunt - http://gruntjs.com (Configuration) • Gulp - http://gulpjs.com (Programming using Streams) • webpack - https://webpack.github.io (Configuration)

Slide 33

Slide 33 text

© 2016 NodeSource npm 33 “For my presentation today, I’m going to do some live coding… again”

Slide 34

Slide 34 text

© 2016 NodeSource Backend for Frontend 34

Slide 35

Slide 35 text

© 2016 NodeSource Backend for Frontend (BFF) 35

Slide 36

Slide 36 text

© 2016 NodeSource Backend for Frontend (BFF) 36 Main Uses • Server Side Rendering • Public API Layer • Realtime Services

Slide 37

Slide 37 text

© 2016 NodeSource Backend for Frontend (BFF) 37 Server Side Rendering • reactjs/express-react-views • ember-cli-fastboot • airbnb/hypernova • build your own (?)

Slide 38

Slide 38 text

Thank you. Julián Duque [email protected] @julian_duque