Javascript Frameworks (and How to Learn Them)
Download as PPTX, PDF0 likes103 views
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.
Javascript Frameworks (and How to Learn Them)
- 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