Staying Sane (dot) JS
JavaScript is changing, but you don't
have to freak out.
Staying Sane (dot) JS
Presented by:
Sergio Cruz
@hashtagserg
Slide 3
Slide 3 text
Staying Sane (dot) JS
Writing JavaScript
Might feel a bit like
this these days
/
Slide 4
Slide 4 text
Why This Talk is Important
Articles like “How it feels to learn JavaScript in 2016”1 keep popping up.
Other articles like “Everything is fine with JavaScript”2 rise in response.
These titles are representative of the amount of disparity between both groups.
Staying Sane (dot) JS
1. https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
2. http://www.macwright.org/2016/10/04/everything-is-fine-with-javascript.html
Slide 5
Slide 5 text
The Year Is 2009
A lot is happening this year…
Staying Sane (dot) JS
Slide 6
Slide 6 text
Staying Sane (dot) JS
Barack Obama is
inaugurated as the
44th President of the
United States
Slide 7
Slide 7 text
Staying Sane (dot) JS
The movie ”Avatar” is
released and wins The
Academy Awards in
three categories
Slide 8
Slide 8 text
Staying Sane (dot) JS
“I Gotta Feeling” by
The Black Eyed Peas
reaches #1 on the US
charts
Slide 9
Slide 9 text
Staying Sane (dot) JS
Node.js makes a dent
in the universe by
allowing JS to be run
on the server-side
Slide 10
Slide 10 text
Staying Sane (dot) JS
Node.js opened up JavaScript
to all new purposes, such as
building robots and
controlling drones
Slide 11
Slide 11 text
Node Rockets at JSConf 2015
Slide 12
Slide 12 text
Staying Sane (dot) JS
// Node.js Hello World
var http = require('http');
var server = http.createServer(/*...*/);
server.listen(8000);
wait, this is new
...and just like that we got Modules !
Slide 13
Slide 13 text
Staying Sane (dot) JS
Two Ways of Creating Modules
Local Files
We can write new local files
and include them as needed
/
Package Manager
We can use a package manager
called npm to get dependencies
npm install underscore
// using the module:
var _ = require('underscore');
var foo = require('./hello');
// includes contents from
// a file called “hello.js”
Slide 14
Slide 14 text
Staying Sane (dot) JS
Two Ways of Creating Modules
npm install underscore
// using the module:
var _ = require('underscore');
wait, this is also new
...and just like that we got a Package Manager "
Slide 15
Slide 15 text
In 2009 we got Node.js and:
Staying Sane (dot) JS
Quick Recap
• Obama, Avatar Movie and “I Gotta Feeling”
• JavaScript Modules by using require(‘package’)
• Package Manager for Node called npm
• #thanksObama
!
"
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
The State of the Front-End
Lots of features were brought to Node.js, but
what’s up with the front-end?
Staying Sane (dot) JS
Slide 18
Slide 18 text
Staying Sane (dot) JS
some time passed since node...
And front-end developers started
wishing they could take advantage
of the awesomeness behind Node.js
! " #
Slide 19
Slide 19 text
Staying Sane (dot) JS
That’s when module
loaders like Browserify
came to existance
! + $ = ♥
hurray for modules in the browser!
Slide 20
Slide 20 text
Staying Sane (dot) JS
ES2015 was released and
developers wanted to
use it right away
then some more time passed...
but the browsers wouldn’t let them yet
Slide 21
Slide 21 text
Staying Sane (dot) JS
That’s when transpilers
like Babel became a
common practice
& Transpilers help browsers understand
tomorrow’s code today
Slide 22
Slide 22 text
Staying Sane (dot) JS
then we had another problem:
How to make all these
things work together?
Slide 23
Slide 23 text
Staying Sane (dot) JS
So Task Runners like Gulp
came to the rescue
' Task Runners help automate some
repetitive tasks such as transpiling
Why so much change?
What are we gaining?
- Literally everyone.
Staying Sane (dot) JS
I am often asked:
Slide 27
Slide 27 text
We're gaining a lot of things
We're pushing the barriers of the language like never before
Staying Sane (dot) JS
What are we gaining?
• Module System
• ES2015+ that works in today's browsers
• More things are now possible:
• Module Splitting & Tree shaking
• Universal Rendering (server & client)
Slide 28
Slide 28 text
How can any of this help me
stay sane while writing
JavaScript apps?
Slide 29
Slide 29 text
Staying Sane (dot) JS
Libraries come and go,
but great development
practices will stay great.
Slide 30
Slide 30 text
Stay in the Language
JavaScript itself is still the safest bet
Staying Sane (dot) JS
Slide 31
Slide 31 text
From Babel to TypeScript
I recently upgraded an app from Angular 1 to Angular 2.
Staying Sane (dot) JS
Stay in the Language
• Used two Babel plugins:
• Object rest spread transform: { …object }
• Add Module Exports: make import foo from 'foo'; work with
CommonJS
• Had to update 22 files removing unsupported TypeScript features,
want to guess which features?
&
Slide 32
Slide 32 text
Staying Sane (dot) JS
I can't blame the
TypeScript compiler for not
supporting those features.
They aren't part of the language spec
(although object spread is an active proposal).
Slide 33
Slide 33 text
Consider Your Tradeoffs
Consider the risks you are taking on when making technology choices.
Ask yourself:
Staying Sane (dot) JS
Stay in the Language
• What if I decide to transpile my code differently?
• What if I have to change my current framework of choice?
Slide 34
Slide 34 text
Staying Sane (dot) JS
Leaning on the
language itself will
decrease the risk
dramatically.
Slide 35
Slide 35 text
Staying Sane (dot) JS
How to find a good balance
between shiny new tools
and the tried and true?
There is a rule of thumb I would like to propose.
Slide 36
Slide 36 text
Separation of Concerns
How it can help us stay sane.
Staying Sane (dot) JS
Slide 37
Slide 37 text
What do you mean by
Separation of Concerns?
In software, it is generally understood that it
is not a good idea to have any single part of
your code having too much responsibility.
Staying Sane (dot) JS
Slide 38
Slide 38 text
Day-to-Day Examples in Web:
Staying Sane (dot) JS
Separation of Concerns
High level
HTML for markup, CSS for styling
Code organization
Break code into small modules that work together
App development
View logic shouldn't need to know how to fetch remote data
!
Slide 39
Slide 39 text
The interpretation might change
Staying Sane (dot) JS
Separation of Concerns
• Angular and other MVC-style frameworks separated
view and logic code into separate files.
• React, known for "Reinventing Best Practices", thought
that the logic that accompanied view files belonged
together.
• Regardless of how view-related code is produced,
business logic still needs to be separate.
Slide 40
Slide 40 text
Staying Sane (dot) JS
Using React?
Presentation Components
should not make Ajax
calls directly. Modularize
app instead.
Using Angular?
Use DI system to inject
services that fetch data
from remote servers or
even from local storage.
Using Express?
Don't execute database
queries directly in your
route functions, wrap that
in a method instead.
Practical advice
Slide 41
Slide 41 text
Staying Sane (dot) JS
Here are a couple of
different ways we can
put this to practice.
Slide 42
Slide 42 text
Module Systems
Build systems like Browserify and Webpack
are here to stay.
Staying Sane (dot) JS
!
Slide 43
Slide 43 text
ES Modules: A Language Spec
Starting with ES2015, isolating code into module files is supported
by the JavaScript language spec itself (not just in Node.js).
Module Systems
• Use module syntax everywhere: import moduleName from './file-name'
• Regardless of how app is built, this is now a standard understood by all
major build systems
• Want to switch from Browserify to Webpack? No problem, no need to
touch the application code (in an ideal world)
• How about adding TypeScript to the project? Sure thing, boss
Slide 44
Slide 44 text
Advantages of Separating Concerns
Separation of Concerns in practice helping us at different levels
Staying Sane (dot) JS
Module Systems
• Build process is not part of app code, easily changeable
• We can bring in dependencies on a per-need basis
• Want to share modules between Node.js apps, React apps, and
even React Native apps? No problem, just import them in.
Slide 45
Slide 45 text
Application Code
Isolating code related to fetching remote
data is always a good idea.
Staying Sane (dot) JS
Slide 46
Slide 46 text
Fetching Data on the Front-end
Making Ajax calls and reading cookies are common practices on the
front-end. Isolate that logic and change frameworks freely.
Staying Sane (dot) JS
Application Code
• Worried Angular 3 will break everything again? Isolate data access
layers into your own modules.
• Ideally, you'll want to import a file that contains all the logic
regarding making Ajax calls, or reading cookies from any UI
frameworks.
Slide 47
Slide 47 text
Fetching Data on the Back-end
It is common to access database records while using Node.js.
Isolate that code as to freely change server-side frameworks.
Staying Sane (dot) JS
Application Code
• Want to switch from Express to something else? Minimize amount
of work by isolating database calls and reusing from different
frameworks.
• Tools like Sequelize or Mongoose help isolate database models,
and are commonly understood by different frameworks.
Slide 48
Slide 48 text
What's the next popular framework?
I dunno! But great development practices
will never go out of style.
Staying Sane (dot) JS
Slide 49
Slide 49 text
Staying Sane (dot) JS
But what if we were able to
kept porting our business
logic code from framework
to framework over the
years?
Slide 50
Slide 50 text
Wouldn't it be cool to reuse a bunch
of agnostic code in a brand new
platform like a JavaScript-powered
smart watch or something?
Staying Sane (dot) JS
Yep, that'd be great!
Slide 51
Slide 51 text
Staying Sane (dot) JS
Do your best to isolate the
rendering logic from the
rest of your app
Then take the same approach to everything else
Slide 52
Slide 52 text
Staying Sane (dot) JS
Master the Ecosystem
' !
" &
Frameworks might change fast,
but the ecosystem does not.
You can (usually) trust it.
Explain better what I mean by
ecosystem
Add logos of NPM, Gulp, etc
(will always need a module loader, a
transpiler, etc)