Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Brief History of Front-end Frameworks

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.

Fabian Buentello

November 16, 2017
Tweet

More Decks by Fabian Buentello

Other Decks in Programming

Transcript

  1. 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?
  2. • 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
  3. 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
  4. Web 1.0(1990s) • No dynamic content • JavaScript/CSS in their

    infancy • Major Players: Netscape & IE Before “The Before Time”
  5. Web 2.0(2000s) • Dynamic HTML ◦ JS/CSS to manipulate DOM

    • Drag-n-Drop & animations • Examples: ◦ Amazon ◦ Wikipedia ◦ Youtube Before “The Before Time”
  6. ECMAScript Before “The Before Time” Version Date v3 1999 v4

    Abandoned v5 2009 v5.1 2011 v6 2015 v7 2016 v8 2017
  7. 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
  8. 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
  9. What is a Framework? • Organization of Applications • Standardizing

    helped collaboration • Cross platform compatibility • Reusable code • Communities and tutorials The Framework Era
  10. JQuery • Release: August 2006 • Simplifies common JS Tasks

    such: ◦ Styles ◦ Animations ◦ DOM manipulation ◦ AJAX Framework War 1: First Blood
  11. MVC is an Architectural pattern(not a design pattern) MVC Frameworks

    Framework War 2: The Monolithic Melee 3 Tier Architecture
  12. Framework War 2: The Monolithic Melee • Two way databinding

    • No models • Huge learning Curve • Views(Sooo much work!) Controller View
  13. 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
  14. Framework War 3: Clash of the Components • ReactJS •

    VueJS • Polymer Framework War 3: Clash of the Components
  15. 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
  16. REDUX Framework War 3: Clash of the Components • Unidirectional

    Dataflow • Influenced by the elm architecture
  17. 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
  18. 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