1) The JavaScript ecosystem has evolved rapidly over the last 20 years from simple PHP + static HTML + JS sites to complex single-page applications using modern frameworks and build tools. 2) Developers working with early JavaScript faced challenges like browser incompatibilities and a lack of standards, while modern developers must contend with an overabundance of libraries and framework options as well as complex build processes. 3) To succeed in today's environment, developers must master core JavaScript concepts, learn modular code design patterns and frameworks, use task runners and bundlers effectively, and stay aware of emerging trends and technologies.

1. How to survive the
JavaScript apocalypse?
Póth Attila 2016

2. HOW DID WE GET HERE?
Explain the last 20 years of JS world to your grandma

3. #WebDev 1990s
"Should array indices start at 0 or 1? My compromise
of 0.5 was rejected without, I thought, proper
consideration." - Stan Kelly-Bootle

4. #WebDev 2000s
"Alternative browsers, led by Firefox, continue to steal back market share from Internet Explorer. As a result,
sites that only work in IE are seen by the industry and by media as the sub-standard pieces of junk they are,
and are subjected to public ridicule on the web, in newspapers, and in magazines, and maybe even on TV. "
- Roger Johansson (456 Berea street): Predictions and hopes for 2005

5. #WebDev 2015
"At times, I think where web
development is at this point is some
cruel joke [...]"
- Drew Hamlett: The Sad State of Web Development
"Lastly, combining a quick iteration cycle with a
seemingly infinite amount of libraries makes for a
very dangerous mix. Everything is just one bower
install oh-my-shiny-library away."
- Manuel Bernhardt: Generation Javascript

6. (R)EVOLUTION
What's happening?

7. Phylogenetic tree & eras of
the UI world
1. Stone age: PHP +
static HTML + JS
enhance era
2. Bronze age: jQuery
era
3. Iron age: RequireJS +
Backbone
4. Renessaince: Node -
CommonJS / tooling /
MVC-MVVM-MV*
wars
5. Steampunk: Post-
MV* / bundling /
components + libs era
6. Space age: ...?

8. 1. PHP / jQuery plumber-hackers,
Joomla-Wordpress gurus,
fullstack garage-company saviors
2. Oldschool classic
first-gen MVC grandmasters,
"own frameworkers"
3. Opinionated MVC superheroes,
Angular evangelists,
anti-Angular freedom fighters
(a.k.a. "haters gonna hate")
4. Early-adopter trendhunter ninjas,
popularists gold-diggers
5. Future-seer weirdo
wizards / monks / oraculums
Typical developer characters based on
which era they coming from

9. LEVEL UP FOR PLUMBERS
Fighting with the spaghetti monster

10. Fighting with the spaghetti monster
• Know the language
• Good, bad & the ugly: use style guides (Airbnb, Google,
Crockford)
• There is always a better code: refactor!
• Design patterns (Addy Osmani ebook)
• OOP vs Functional programming (mpj youtube channel)
• Get familiar with concepts: modularisation, dependency
management, MVC (Backbone), task runners, envs
• Know your tools, hello command line!
• There is a solution already for everything: know libraries,
frameworks!
• Stay tuned: Javascript weekly, HTML5 weekly, Smashing Mag

11. LEVEL UP FOR THE OTHERS
Framework world wars

12. Framework world wars
• Level up command line (Git bash)
• Think in a team: Git, Github, feature branching, pull
requests, code reviews
• Write modular code, extract everything you can,
• Use task runners (Gulp, Grunt, Broccoli), bundle your
code for different envs (Webpack, Browserify)
• Try as many frameworks as you can, master one
• Choose based on the requirements (not every
project needs a full-blown MVC like Angular)

13. ASKING THE RIGHT QUESTIONS
Adapt or die? Swim with the flow?

14. Technology stack evolution
1. jQuery, jQuery UI, Prototype
Dep.mgmt: IIFE, globals
Tools: copy-paste online
minifiers, CVS
2. MVC, Backbone, templating,
REST
Dep.mgmt: RequireJS
Tools: SVN, Git
3. MVVM, Angular, Ember
(+jQuery)
Server-side js: Node
Dep.mgmt: CommonJS vs AMD
Tools: Grunt, Karma-Jasmine
CSS preprocessors
4. MV*, Angular + jqLite, MEAN stack,
Polymer shadow-dom, Material design
Compile to JS, Babel, webassembly
IO.js
PostCSS
Tools: Gulp, Broccoli
Devtools: Chrome devtools
Automated testing: Selenium,
Protractor, CucumberJS
5. React, React Native, RX, cycle.js
ES6-ES7
Inline CSS w/JS
Model: Flux, Redux, Falcor, GraphQL,
ImmutableJS, Relay
Tools: Browserify, Webpack
Devtools: time travel debugging, hot
reload

15. LEVEL UP+: SECRET ARCANUMS
Trends & future-proof recipees

16. Trends & future-proof recipes
1. Tech interview question: if you could choose
only one framework / technology in 2016,
which would you pick? (ES6!)
2. Functional / stateful / applicative / declarative
over imperative (Redux)
3. Component development over MVCs
4. Purpose-specific libs over the One True
Framework (moment.js). Question: how these
fit together? (package.json w/ hundreds of
devDeps)
5. Open source ecosystem: popularity wars will
not end. Read the sources!
6. Everything is a stream (RX.js) – js meant for
functional, not OOP
7. Do we even need CSS anymore?
8. Native ES6-7 task runners

17. JavaScript,