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
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
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)
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
Photo credits: http://nohopefor.us/
Predictions expiry date: 3 weeks from opening.
Based on the standard interview question: how would you explain MVC concept to your grandma?
- HTTP protocol, request-response
- Serving raw static html pages
- table, iframe, marquee, blink, inline css
- 1995 Javascript: client-side form enhancement only
- 1995 FutureWave Software acquired by Macromedia, FutureSplash Animator renamed to Flash
- 1999 Microsoft released proprietrary ActiveX extension for IE called XMLHTTP, soon adapted by Mozilla, Safari, Opera as XMLHTTPRequest (XHR)
- Launch of Gmail -> term AJAX
- PHP4.0 (2000): templating (about_us.php, contact_us.php)
- "divitis" / unsemantic html, rounded corner hacks
- CMS zoo (Drupal, Joomla, Wordpress): web development for the masses
- Steps towards realtime web: hidden iframe, xhr polling, xhr long polling, JSONP, HTTP piggybacking
- support IE6, IE7, IE8, ...
- HTML5: dozens of different APIs supported by different browser vendors
- CSS3: semantic elements, BEM, style guides, scalability, animations, responsive web.
- cross-browser hacks for legacy browserS (sic! - IE)
- Quasi-standards based on popularity: Bootstrap, HTML5 Boilerplate, Yeoman (where to start a project??)
- Diversity, chaos, communities supporting different frameworks
- MVC wars: in search of the next holy grail (Angular 2.0)
- Server side javascript, noSQL/schemaless databases, Internet of Things
- Non-blocking, async, promise, sockets, real-time web, respsonsivity benchmarks (1000ms), REST architectures
- Tools: node ecosystem, dependency management, preprocessors, build tools, scaffolding
- Testing (TDD/BDD): Karma, Jasmine, Selenium, CucumberJS, Mocha, Chai, Chai-as-promised, etc
Photo: Diversity and phylogenetic analysis of bacteria in the mucosa of chicken ceca and comparison with bacteria in the cecal lumen
Typical developer characters based on which era they coming from.
Our focus: #3-4-5
Our question: how to be a #5
To read:
http://ferd.ca/the-little-printf.html
Swim with the flow or not?
Obviously yes if you are a dev.
If business, you're probably already having hard times :D
Swim with the flow or not?
Obviously yes if you are a dev.
If business, you're probably already having hard times :D
Question for devs: how to become an oraculum in this chaos? (You can't learn everything, you have to choose your weapon)
Question for business: what tech stack is future-proof enough to stick to? (You can't pay for devs wanting to rewrite your whole app every 3 months when a new supercool framework comes up)
Swim with the flow or not?
Obviously yes if you are a dev.
If business, you're probably already having hard times :D