How to survive the JavaScript apocalypse
0 likes650 views
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.
![#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](https://image.slidesharecdn.com/js-survivor-toolkit-2016-160225203842/85/How-to-survive-the-JavaScript-apocalypse-5-320.jpg)
More Related Content
![[Mas 500] Mobile Basics](https://cdn.slidesharecdn.com/ss_thumbnails/mas-500-5-mobile-basics-131122191613-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Similar to How to survive the JavaScript apocalypse (20)
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
How to survive the JavaScript apocalypse
- 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
- 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,
Editor's Notes
- #2: Photo credits: http://nohopefor.us/ Predictions expiry date: 3 weeks from opening.
- #3: Based on the standard interview question: how would you explain MVC concept to your grandma?
- #4: - 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
- #5: - 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, ...
- #6: - 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
- #7: Photo: Diversity and phylogenetic analysis of bacteria in the mucosa of chicken ceca and comparison with bacteria in the cecal lumen
- #8: Era milestones (holy grails): 1 ➔ 2: jQuery 2 ➔ 3: Backbone 3 ➔ 4: Node, npm ecosystem, Angular 4 ➔ 5: React
- #9: 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
- #10: Swim with the flow or not? Obviously yes if you are a dev. If business, you're probably already having hard times :D
- #11: Javascript style guides: http://noeticforce.com/best-javascript-style-guide-for-maintainable-code Addy Osmani design patterns: https://addyosmani.com/resources/essentialjsdesignpatterns/book/ https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q/videos http://javascriptweekly.com/ http://html5weekly.com/ https://www.smashingmagazine.com/
- #12: Swim with the flow or not? Obviously yes if you are a dev. If business, you're probably already having hard times :D
- #13: Javascript style guides: http://noeticforce.com/best-javascript-style-guide-for-maintainable-code Addy Osmani design patterns: https://addyosmani.com/resources/essentialjsdesignpatterns/book/
- #14: Swim with the flow or not? Obviously yes if you are a dev. If business, you're probably already having hard times :D
- #15: 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)
- #16: Swim with the flow or not? Obviously yes if you are a dev. If business, you're probably already having hard times :D
- #17: https://ponyfoo.com/articles/es6 https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f#.lv5sn4h9c https://drboolean.gitbooks.io/mostly-adequate-guide/ https://www.gitbook.com/book/jcouyang/functional-javascript https://medium.com/@PitaJ/stop-classifying-javascript-4cc823dfbedf http://rackt.org/redux/index.html https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 http://xgrommx.github.io/rx-book// http://cycle.js.org/ http://staltz.com/why-react-redux-is-an-inferior-paradigm.html http://engineering.widen.com/blog/future-of-the-web-react-falcor/ https://edgecoders.com/why-i-think-react-with-graphql-and-relay-will-be-the-angular-js-killers-591174bafc15#.ukptk3ykw https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31#.ghozw1ve0 http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html https://www.youtube.com/watch?v=xsSnOQynTHs http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ https://medium.com/swlh/you-might-not-need-gulp-js-89a0220487dd#.i8xl3ujge https://medium.com/@housecor/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.18t4ocd5w
- #18: Lana Del Rey loves JS! Be like Lana Del Rey!