An Introduction to Node.js and some tools and patterns used 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

3. © 2018 NodeSource3

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

25. © 2018 NodeSource25

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 (?)

40. Thank you.
Julián Duque
julian@nodesource.com
@julian_duque