1 of 27

The Crazy Frontend

What we talk when talking about frontend?

2 of 27

Front-end?

  • UX
  • UI
  • HTML
  • CSS
  • JS
  • Web Server
  • ……

​

3 of 27

Front-end

  • UX?
  • UI?

​

4 of 27

Client

Web Servers

5 of 27

Client

Web Servers

CDN

6 of 27

Client

Web Servers

CDN

Backends

7 of 27

Client

Web Servers

CDN

BFF

Backends

8 of 27

Client

Web Servers

CDN

BFF

Backends

9 of 27

Page loading

Load

Render

Parse

Layout

Paint

10 of 27

  • ​

​

11 of 27

Disruption 1

  • ​

​

Ajax N JSONP

12 of 27

  • ​

​

JQuery -> SPA …

13 of 27

  • ​

​

14 of 27

  • ​

​

Flash N Flex

15 of 27

Pros and Cons

  • ​

​

16 of 27

Virtual DOM

  • ​

​

React

17 of 27

Pros and Cons

  • ​

​

18 of 27

SEO!

  • ​

​

19 of 27

CSR -> SSR

  • ​

​

20 of 27

CSR -> ESR -> SSR

  • ​

​

21 of 27

BG/Offline

  • ​

​

22 of 27

Innovation 2

  • ​

​

PWA

23 of 27

Innovation 2

  • Offline
  • Notification
  • Manifest

​

24 of 27

Edge Computing/Store

  • ​

​

25 of 27

Other

  • Cross platform
    • RN
    • Flutter
    • KMP
  • WASM
  • WebGPU

​

26 of 27

Takeaways

  • More interaction
  • BFF
  • Micro everything
  • CDN ++
  • Opt for devices

​

27 of 27

Thank you!