The document discusses the evolution and importance of JavaScript frameworks, emphasizing their role in maintaining UI synchronization with data. It covers historical context from the creation of JavaScript in 1995 through significant developments and challenges, including the rise of popular frameworks like Angular and React. Additionally, it offers guidance on learning these frameworks, focusing on understanding their core principles and commonalities, as well as practical steps for effective learning.

1. The “Why” Behind JavaScript
Frameworks
(and How to Learn Them)
Peter Elbaum
Software Engineer @ Praxent
@pjelbaum

2. 1. The “Why” Behind JavaScript Frameworks

3. Discuss
● What do you think is the main problem that JavaScript
frameworks solve?

4. A brief history of JS
● 1995: created by Brendan Eich @ Netscape in 10 days
○ Still deal with this legacy to some extent today
○ ‘Gotchas’
● Browser wars/struggling with implementation + consistency
○ ACID tests, etc.
● ECMA meets Nov. ‘96; ES1 released June ‘97

5. Turning point: 2005-2013
● 2005-2009: enhanced browsers, W3C compliance is met, AJAX (April 06), jQuery (Aug. 06) + other
libraries, Chrome ‘takes the lead’, mobile, decline in desktop, ES5 (Dec. 09)
● May 2009: NodeJS
● July 2010: Knockout.js
● October 2010: AngularJS and Backbone

9. Issues with Vanilla JS
● Hard to write
● Hard to read
● Super fragile (hard to maintain)

11. Non-central Reasons
● Components
● Speed
● Ease
● Reusability
● Large communities

12. The Big Kahuna
“Keeping the UI in sync with the state is
hard”

13. Takeaways
● Super clarifying for me
● All of the other reasons are in service of this goal
● When considering the history, it makes a lot of sense
○ While jQuery was the most popular JavaScript library for web interfaces, it lacked facilities for handling
data consistently across shared views

14. A Word on Abstractions
● Each significant piece of functionality in a program should be implemented in just one place in the source
code. Where similar functions are carried out by distinct pieces of code, it is generally beneficial to
combine them into one by abstracting out the varying parts. - Benjamin Pierce, Types and
Programming Languages (2002)
● Helpfulness is limited by understanding; understanding their central purpose is helpful for
determining their usage
● How deep do I really need to go? (Virtual DOM, etc)

15. 2. Learning JavaScript Frameworks

16. Framing Your Learning
● Remember the one reason why they exist
● Given that framing, remember how the tools aid in that goal; avoid flame wars
● There are many ways to solve the same problem, but the 3 major frameworks have core
commonalities

17. Framework Commonalities
Given that frameworks exist to keep the UI in sync with data, modern frameworks all have:
● Components (templates and updating local data)
● Reconciliation mechanism/shadow DOM (difference from Web Components)
● A way for components to interact and share data
● Just JavaScript under the hood

18. Understanding the Ecosystems
● All frameworks solve the same problem, but they do it in varying ways
○ Angular - fully featured
○ Vue - incrementally adoptable
○ More in common than not
● Do some research and know what you’re getting into - why choose one over the other? What are
the distinctives?
● The transition between them is easier than you might think

19. Principles for Learning a New Framework
● Learn the fundamentals
● Seek out the best teachers: Wes Bos, KCD, Egghead, etc.
● Build real stuff
● Learn the philosophy behind the framework + what’s available for problem solving

20. My Experience
● React, Angular, Redux, GraphQL, etc
● Learning from courses, learning from others, learning by doing
● BUT a video course !== knowing
● All frameworks, libraries, etc. have a core set of patterns (props/state + 80/20 etc)

21. Building Real Stuff: The Recipe for Learning
● Build something you want to exist in the world
○ Solve a real problem
● What if you don’t have a big idea?
○ Replicate a well known app
○ Variation on a common idea (Yeezy dating)
○ Enhance a simple project (JS30)
● Start small, just a script will do

22. ● Senior Software Engineering Manager
● Senior QA Automation Engineer
● Software Engineer (React)

23. Resources
● https://blog.logrocket.com/history-of-frontend-frameworks/
● https://medium.com/javascript-scene/abstraction-composition-cb2849d5bdd6
● https://css-tricks.com/importance-javascript-abstractions-working-remote-data/
● https://dev.to/_adam_barker/the-super-brief-history-of-javascript-frameworks-for-those-somewhat-interested-3m82
● https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445
● https://marketingexamples.com