Slide 1
Slide 1 text
Historiae
JavaScript
Marco Solazzi - @dwightjack
FEVR 10/2016
Slide 2
Slide 2 text
About me
- Senior Front-end @ AQuest
- Co-founder Frontenders Verona
Slide 3
Slide 3 text
Nolan Lawson - Oct 2016
http://www.digital-web.com/articles/fluid_thinking/
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Don’t flame
Think
Slide 6
Slide 6 text
Don’t flame
Think
Slide 7
Slide 7 text
Understand
by History
Slide 8
Slide 8 text
JS Timeline
-10
(1995)
Netscape
0
(2005)
AJAX
0
(2005)
Prototype.js
1
(2006)
jQuery
8
(2013)
React
4
(2009)
Node.js
5
(2010)
Backbone.js
7
(2012)
Grunt
Slide 9
Slide 9 text
Before
JavaScript
-10 before JS
Slide 10
Slide 10 text
-10 before JS (Mid 90s) -
The Hyper-text Era
Slide 11
Slide 11 text
- wild new world
- limited design and styles
- no SEO
- a couple of crappy browsers
- just plain noisy PCs
Hyper-text Era
Slide 12
Slide 12 text
Weird gods
Slide 13
Slide 13 text
-5 before JS (2000) - XHTML
- XML all the thing
- improved semantics
- stricter error handling
- let CSS do the style
Slide 14
Slide 14 text
“ … Graceful degradation means that your
Web site continues to operate even when
viewed with less-than-optimal software in
which advanced effects don't work... ”
Graceful Degradation
Peter-Paul Koch - Oct 2002
http://www.digital-web.com/articles/fluid_thinking/
Slide 15
Slide 15 text
And Then There
Was AJAX
The blank screen rebellion (year 0)
Slide 16
Slide 16 text
“ … Instead of loading a webpage, at the
start of the session, the browser loads an
Ajax engine — written in JavaScript [...].
This engine is responsible for both
rendering the interface the user sees and
communicating with the server on the
user’s behalf. ”
Async JavaScript and XML
Jesse James Garrett - Feb 2005
http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
Slide 17
Slide 17 text
“ … Instead of loading a webpage, at the
start of the session, the browser loads an
Ajax engine — written in JavaScript [...].
This engine is responsible for both
rendering the interface the user sees and
communicating with the server on the
user’s behalf. ”
Async JavaScript and XML
Jesse James Garrett - Feb 2005
http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
Slide 18
Slide 18 text
Web 2.0 - Breaking Changes
Slide 19
Slide 19 text
Progressive Enhancement
Aaron Gustafson - Oct 2008
http://alistapart.com/article/understandingprogressiveenhancement
Slide 20
Slide 20 text
“ … Progressive enhancement focuses on
the content. [...]
Content is the reason we create websites
to begin with. Some sites disseminate it,
some collect it, some request it, some
manipulate it, and some even do all of the
above, but they all require it.
Content-first theory
Slide 21
Slide 21 text
“ … Progressive enhancement focuses on
the content. [...]
Content is the reason we create websites
to begin with. Some sites disseminate it,
some collect it, some request it, some
manipulate it, and some even do all of the
above, but they all require it.
Content-first theory
Slide 22
Slide 22 text
Is it true?
Slide 23
Slide 23 text
Is it true?
Slide 24
Slide 24 text
The backbonian
Dynasty
5 after JS - the sengoku era of frameworks
Slide 25
Slide 25 text
“ … Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events... ”
Backbone.js
Slide 26
Slide 26 text
“ … Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events... ”
Backbone.js
Slide 27
Slide 27 text
Web.site !== Web.application
Slide 28
Slide 28 text
The web has changed, indeed...
Slide 29
Slide 29 text
“ We are trying to build applications that
run right in a dozen browsers, look good
on thousands of different devices, load
fast enough for impatient commuters in
the subway, and are still accessible
enough that blind people can use them. ”
Frontend Fadigue
Quincy Larson - Oct 2016
https://medium.freecodecamp.com/javascript-fatigue-fatigue-66ffb619f6ce
Slide 30
Slide 30 text
Old concepts for a new era?
Motorwagen
Slide 31
Slide 31 text
JavaScript, Your
New Overlord
7 after JS - Grunt & the discovery of frontend-ops world
Slide 32
Slide 32 text
“ Being primarily a JavaScript developer, I
decided to use Node.js and npm because
the dependencies I most care about
(JSHint and UglifyJS) were already npm
modules. ”
Grunt
Ben Alman - Mar 2012
https://bocoup.com/weblog/introducing-grunt
Slide 33
Slide 33 text
“ Being primarily a JavaScript developer, I
decided to use Node.js and npm because
the dependencies I most care about
(JSHint and UglifyJS) were already npm
modules. ”
Grunt
Ben Alman - Mar 2012
https://bocoup.com/weblog/introducing-grunt
Slide 34
Slide 34 text
- modular buildings
- frontenders can rule the CLI
- JavaScript can manipulate itself
- JavaScript can generate other
languages
Discovers
Slide 35
Slide 35 text
One true web
language
8 after JS - The React advent & JavaScript Inquisition
Slide 36
Slide 36 text
“ Oh my god no, no one uses jQuery
anymore. You should try learning React,
it’s 2016.”
Jose Aguinaga - Oct 2016
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
Slide 37
Slide 37 text
- CSS sucks → CSS in JS
- HTML boo! → JSX it please
- You might not need jQuery
- … but at least 200MB of npm modules
new rules
Slide 38
Slide 38 text
Coffeescript anyone?
Slide 39
Slide 39 text
“ Yes, it is easy to poke fun at CSS and it’s
Frankenstein-esque syntax. It is also easy
to show that you can do all the things it
does with other technologies.”
Christian Heilmann - Oct 2016
https://www.christianheilmann.com/2016/10/05/can-we-stop-bad-mouthing-css-in-devel
oper-talks-please/
Slide 40
Slide 40 text
“ Yes, it is easy to poke fun at JavaScript
and it’s Frankenstein-esque syntax. It is
also easy to show that you can do all the
things it does with other technologies.”
Slide 41
Slide 41 text
“ JavaScript is too great an opportunity to
build accessible, easy-to-use and flexible
solutions for the web to not use it. [...] We
shouldn’t blindly rely on it – we should
own the responsibility to work around its
flaky nature and reliability issues.”
Christian Heilmann - Oct 2016
https://www.christianheilmann.com/2016/10/14/we-need-javascript-to-fix-the-web/
Slide 42
Slide 42 text
Server-side
rendering
10 after JS - a new hope
Slide 43
Slide 43 text
Client-side code that renders on the
server generating a static HTML to be
served to the user...
Slide 44
Slide 44 text
Back to square
one
Slide 45
Slide 45 text
Thanks