The history of Javascript frameworks: changes in front-end design philosophy

Transcript

1. THE HISTORY OF JAVASCRIPT FRAMEWORKS: CHANGES IN FRONT-END DESIGN PHILOSOPHY 29, Mar, 2024 Design Conference extends OOC @kkeeth @kuwahara_jsri @kkeeth
2. WHO AM I
3. WHO AM I
4. WHO AM I
5. WHO AM I
6. WHO AM I (npmjs.com/~kkeeth)
7. Let’s start 😆
8. INITIAL(≒OLD) FRONT-END
9. INITIAL(≒OLD) FRONT-END ➤ Only HTML ➤ Emergence of CSS ➤ Emergence of JavaScript ➤ DHTML Concepts and Ajax ➤ Browser Compatibility Issues ➤ Emergence of jQuery
10. INITIAL(≒OLD) FRONT-END ➤ Only HTML ➤ Emergence of CSS ➤ Emergence of JavaScript ➤ DHTML Concepts and Ajax ➤ Browser Compatibility Issues ➤ Emergence of jQuery
11. jQuery ➤ made by John Resig ➤ $ ➤ jQeury is NOT FRAMEWORK but is one of libraries ➤ There are no opinion of entire application design
12. jQuery (Sample Code)
13. BOOK (written by John Resig) https://amzn.asia/d/bpedlvM https://amzn.asia/d/eIiFpE5 ←en ja→
14. MVC, MVVM ARCHITECTURE
15. MVC, MVVM Controller View Model input input ViewModel View Model manipulates data data data binding manipulates fires events MVC MVVM fires events
16. 3 MAJOR JAVASCRIPT FRAMEWORKS ※There are many theories
17. OLD 3 MAJOR JAVASCRIPT FRAMEWORKS Architechture IMO Backbone.js MVC 👍 minimal, most fl exible 😢 Over-speci fi ed for small projects, tends to be complex Angular.js (AngularJS) MVC + MVVM 👍 full-stack, various API 😢 but high lerning cost, tends to be chaotic Knockout.js MVVM 👍 simplest and minimal, 😢 Whatever we do, we do it ourselves
18. COMPONENT- BASED, DECLARATIVE UI
19. COMPONENT-BASED , DECLARATIVE UI
20. COMPONENT-BASED , DECLARATIVE UI h1 AddTask component TaskList component Filter component
21. SAMPLE CODE (app.jsx)
22. SAMPLE CODE (addTask.jsx)
23. SPA (SINGLE PAGE APPLICATION)
24. SPA (Single Page Application) State Management Data Flow Routing Performance/ Caching SEO
25. SPA (Single Page Application) State Management Data Flow Routing Performance/ Caching SEO
26. (UNIDIRECTIONAL) DATA FLOW
27. UNIDIRECTIONAL DATA FLOW FLUX Image By: https://facebook.github.io/flux/
28. UNIDIRECTIONAL DATA FLOW Image By: https://medium.com/@sidathasiri/flux-and-redux-f6c9560997d7
29. WRAPPER, ONE PACKAGE
30. WRAPPER, ONE PACKAGE React Vue.js Angular Qwik Svelte SolidJS
31. WRAPPER, ONE PACKAGE Next.js Svelte Nuxt.js SolidStart React Vue.js Sveltekit SolidJS
32. IN THE LAST
33. IN THE LAST ➤ Little by little, it's getting more structured ➤ Logic is kept in the front end ➤ Separation of duties and interests (Modularization) ➤ One package vs. eco-system ➤ WebAssembly, serverless, JAMstack, AI/ML integration…etc
34. “ There is no answer. Only decision making and steps. -kkeeth
35. Have fun Front-end 😆