# Outline ---- - What is frontend development - JS frameworks demo - Why do we use them - Architecture - Why do we care --- # What is front-end --- # What is a website ---- Website is a collection of `.html`, beautified by `.css` and manipulated by `.js` --- (Chris, 2022) ---- # What are `.html`, `.css`, and `.js`? ---- # text files. ---- # `string`. ---- Fancy of writing every single character of `.html` for building website? ----  ---- computer does. ---- Consider `.tex` and `.md`, why `.md` is prefered? ---- # Static Site Generator - [ Jekyll](https://jekyllrb.com/) - [ Gatsby](https://www.gatsbyjs.com/) - [ Hugo](https://gohugo.io/) ... a lot more ---- # Demo  --- # Frameworks | VanillaJS | Vue.js | React | |:------------------------------------------------------:|:------------------------------------------------:|:--------------------------------------------------:| |  |  |  | ---- # Let's build a [To do App](https://fdq09eca.github.io/vanillaJS-to-do-app/). ----  ----  ----  ---- Where to implement logic and rendering in the application? --- # Rendering ---- Server-side rendering (SSR) : rendering a client-side or universal app to HTML on the server. : see [SSR example - Server only] and [SSR example - Rehydration] [SSR example - server only]: https://stackblitz.com/edit/vue-ssr-example-basic-ozzudd?file=server.js [SSR example - rehydration]: https://stackblitz.com/edit/vue-ssr-example-25y9pp?file=server.js ---- Client-side rendering (CSR) : rendering an app in a browser, generally using the DOM. --- # Next gen JS framework  :arrow_right:   :arrow_right:  --- Why do we care about the `SSR` or `CSR` --- 1. Performance 2. Realiability/Availability 3. Security 4. Cost --- Thanks.