Tweet
Tweet

Slide 1

Slide 1 text

THE HISTORY OF JAVASCRIPT FRAMEWORKS: CHANGES IN FRONT-END DESIGN PHILOSOPHY 29, Mar, 2024 Design Conference extends OOC @kkeeth @kuwahara_jsri @kkeeth

Slide 2

Slide 2 text

WHO AM I

Slide 3

Slide 3 text

WHO AM I

Slide 4

Slide 4 text

WHO AM I

Slide 5

Slide 5 text

WHO AM I

Slide 6

Slide 6 text

WHO AM I (npmjs.com/~kkeeth)

Slide 7

Slide 7 text

Let’s start 😆

Slide 8

Slide 8 text

INITIAL(≒OLD) FRONT-END

Slide 9

Slide 9 text

INITIAL(≒OLD) FRONT-END ➤ Only HTML ➤ Emergence of CSS ➤ Emergence of JavaScript ➤ DHTML Concepts and Ajax ➤ Browser Compatibility Issues ➤ Emergence of jQuery

Slide 10

Slide 10 text

INITIAL(≒OLD) FRONT-END ➤ Only HTML ➤ Emergence of CSS ➤ Emergence of JavaScript ➤ DHTML Concepts and Ajax ➤ Browser Compatibility Issues ➤ Emergence of jQuery

Slide 11

Slide 11 text

jQuery ➤ made by John Resig ➤ $ ➤ jQeury is NOT FRAMEWORK but is one of libraries ➤ There are no opinion of entire application design

Slide 12

Slide 12 text

jQuery (Sample Code)

Slide 13

Slide 13 text

BOOK (written by John Resig) https://amzn.asia/d/bpedlvM https://amzn.asia/d/eIiFpE5 ←en ja→

Slide 14

Slide 14 text

MVC, MVVM ARCHITECTURE

Slide 15

Slide 15 text

MVC, MVVM Controller View Model input input ViewModel View Model manipulates data data data binding manipulates fires events MVC MVVM fires events

Slide 16

Slide 16 text

3 MAJOR JAVASCRIPT FRAMEWORKS ※There are many theories

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

COMPONENT- BASED, DECLARATIVE UI

Slide 19

Slide 19 text

COMPONENT-BASED , DECLARATIVE UI

Slide 20

Slide 20 text

COMPONENT-BASED , DECLARATIVE UI h1 AddTask component TaskList component Filter component

Slide 21

Slide 21 text

SAMPLE CODE (app.jsx)

Slide 22

Slide 22 text

SAMPLE CODE (addTask.jsx)

Slide 23

Slide 23 text

SPA (SINGLE PAGE APPLICATION)

Slide 24

Slide 24 text

SPA (Single Page Application) State Management Data Flow Routing Performance/ Caching SEO

Slide 25

Slide 25 text

SPA (Single Page Application) State Management Data Flow Routing Performance/ Caching SEO

Slide 26

Slide 26 text

(UNIDIRECTIONAL) DATA FLOW

Slide 27

Slide 27 text

UNIDIRECTIONAL DATA FLOW FLUX Image By: https://facebook.github.io/flux/

Slide 28

Slide 28 text

UNIDIRECTIONAL DATA FLOW Image By: https://medium.com/@sidathasiri/flux-and-redux-f6c9560997d7

Slide 29

Slide 29 text

WRAPPER, ONE PACKAGE

Slide 30

Slide 30 text

WRAPPER, ONE PACKAGE React Vue.js Angular Qwik Svelte SolidJS

Slide 31

Slide 31 text

WRAPPER, ONE PACKAGE Next.js Svelte Nuxt.js SolidStart React Vue.js Sveltekit SolidJS

Slide 32

Slide 32 text

IN THE LAST

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

“ There is no answer. Only decision making and steps. -kkeeth

Slide 35

Slide 35 text

Have fun Front-end 😆

Slide 36

Slide 36 text

No content