A Brief History of Front-end Frameworks

This is the history and evolution of Web Development frameworks, specifically around the Javascript framework predecessors of React and the origin and adoption of current features.

1. A Brief History of Front-end Frameworks by : Fabian Buentello @initFabian
2. About Presentation { "name": "Fabian Buentello", } "occupation": "iOS Developer at ChaiOne", "loves": ["JavaScript", "Swift"]
3. Questions you might be asking yourself? • What is AJAX? • What does mean? • What is MVC? • Why are there so many frameworks?! • What’s the difference between JavaScript and ECMAScript?
4. • The Framework Era ◦ Framework War 1: First Blood ◦ Framework War 2: The Monolithic Melee ◦ Framework War 3: Clash of the Components • What’s next? • Follow up Topics • Questions? Agenda • What is JavaScript and Why? • Before “The Before Time” ◦ Web Versions ◦ ECMAScript ◦ Browser Wars • The Before times ◦ Server-Side Rendering ◦ Client-Side Rendering
5. What is JavaScript and Why? • Created in 1995 by Brendan Eich(worked at Netscape) • Developed in 10 days and was initially named LiveScript • Netscape and Sun Labs joined forces against Microsoft • Why? Add interactivity into the browser • Changed name to JavaScript to jump on the Java Bandwagon • Suns Lab claimed ownership of the JavaScript Trademark ◦ This is why the standard is called ECMAScript
7. Before “The Before Time”
8. Web 1.0(1990s) • No dynamic content • JavaScript/CSS in their infancy • Major Players: Netscape & IE Before “The Before Time”
9. Web 2.0(2000s) • Dynamic HTML ◦ JS/CSS to manipulate DOM • Drag-n-Drop & animations • Examples: ◦ Amazon ◦ Wikipedia ◦ Youtube Before “The Before Time”
10. ECMAScript Before “The Before Time” Version Date v3 1999 v4 Abandoned v5 2009 v5.1 2011 v6 2015 v7 2016 v8 2017
11. Browser Wars • Opera • Safari • IE • Firefox Before “The Before Time” “Having 10 years in which nothing happened allowed for the language to become stable.” - Douglas Crockford
12. The Before Time
13. Server-Side vs Client-Side • Server-Side Rendering ◦ Logic existed in the Backend ◦ Very expensive • Client-Side Rendering ◦ Logic existed on client ◦ No reloading ◦ Much more responsive The Before Time
14. The Before Time
15. Example: Server Side Rendering The Before Time
16. XMLHttpRequest aka AJAX The Before Time
17. Make it Client-Side Rendered Example: Client Side Rendering The Before Time
18. The Framework Era
20. What is a Framework? • Organization of Applications • Standardizing helped collaboration • Cross platform compatibility • Reusable code • Communities and tutorials The Framework Era
21. Framework War 1: First Blood
22. • Prototype • Dogo • Mootools • JQuery(Winner!) Framework War 1: First Blood Choose a Side
23. JQuery • Release: August 2006 • Simplifies common JS Tasks such: ◦ Styles ◦ Animations ◦ DOM manipulation ◦ AJAX Framework War 1: First Blood
24. AJAX Before Framework War 1: First Blood After
25. JQuery: Events Framework War 1: First Blood
26. Example: Update Username JQuery Framework War 1: First Blood
27. Peace was brought to the Galaxy!
28. Framework War 2: The Monolithic Melee
29. MVC is an Architectural pattern(not a design pattern) MVC Frameworks Framework War 2: The Monolithic Melee 3 Tier Architecture
30. Choose a Side Framework War 2: The Monolithic Melee
31. Framework War 2: The Monolithic Melee
32. Framework War 2: The Monolithic Melee
33. Framework War 2: The Monolithic Melee
34. Framework War 2: The Monolithic Melee
35. • Doesn’t follow typical MVC architecture(no controller) Framework War 2: The Monolithic Melee Model Controller
36. Framework War 2: The Monolithic Melee Model View Controller
37. Framework War 2: The Monolithic Melee • Two way databinding • No models • Huge learning Curve • Views(Sooo much work!) Controller View
38. Real world Application Framework War 2: The Monolithic Melee
39. Framework War 2: The Monolithic Melee
40. Framework War 2: The Monolithic Melee
41. Framework War 2: The Monolithic Melee
42. Framework War 2: The Monolithic Melee
45. Issues? • Controllers get bloated with code because they are between our Models and Views. • DATA BINDING! But Fabian, I followed the diagram… How come it’s not working? Framework War 2: The Monolithic Melee
46. My issues with their View Framework War 2: The Monolithic Melee
47. Framework War 3: Clash of the Components
48. Framework War 3: Clash of the Components • ReactJS • VueJS • Polymer Framework War 3: Clash of the Components
49. ReactJS • Announced at JSConf 2013 • Very Declarative • Discourages mutation(mutation is bad) • Rerenders DOM(like SSR) • Code becomes more predictable Framework War 3: Clash of the Components “They told us that we took a huge step backwards in terms of the maintainability of our code simply because we were embedding our markup inside of our Javascript.” - Tom Occhino, React.js Conf 2015 Keynote
50. REDUX Framework War 3: Clash of the Components • Unidirectional Dataflow • Influenced by the elm architecture
51. What’s next?
52. Follow up Topics/People • People ◦ Tom Occhino(Manager of React Team) ◦ Pete hunt(react) ◦ Brendan Eich(Creator of JS) ◦ Robert “Uncle Bob” Martin(Architecture) ◦ John Ried(Architecture) ◦ Douglas Crockford(JavaScript) • Topics ◦ Unidirectional Dataflow ◦ Architectures in JavaScript(MVC, MVVM, MVP) • Must watch Videos! ◦ JSConf 2013(React's announcement) ◦ Hacker Way: Rethinking Web App Development at Facebook
53. References: • Beginner's Guide to Front End Frameworks by Daniel Tunon • Marco Rogers: Finding Patterns Across Front-end Frameworks [JSConf2014] • A short history of Javascript frameworks: a comparison of JQuery, AngularJS and React • Frontend Tech Talk: The Frontend Landscape Explained and 4 Advanced Frameworks • JavaScript Timeline 1 & JavaScript Timeline 2 • Douglas Crockford on JavaScript - Chapter 2: And Then There Was JavaScript • Douglas Crockford: The History of JavaScript • Client-side vs. server-side rendering: why it’s not all black and white • A Short History of Javascript(W3) • A Short History of Javascript Frameworks • Jon Reid - Software Paradigms & Patterns — Did We Get It All Wrong? • Architecture the Lost Years by Robert Martin • React.js Conf 2015 Keynote - Introducing React Native • Tom Occhino and Jordan Walke: JS Apps at Facebook(React is born) • Hacker Way: Rethinking Web App Development at Facebook
54. Questions?
55. initFabian fabian.buentello@gmail.com