# Frontend Development ###### tags: `JavaScript` `Web Technology` `System Design` `App` `Software` `GUI` `Design Pattern` `Cross Platform` `UI Design` Some discussions and implementation for frontend tech & dev. ![](https://i.imgur.com/KHIUzVT.jpg) ## Resources - [Learn THESE Technologies to become a Web Developer in 2023! - codeSTACKr](https://www.youtube.com/watch?v=8aosxBJQdVc) - [getting started 新手入門 - mdn web docs](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web) - [JavaScript Tutorial - mdn web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - [VS Code Has Dev Tools & Console!! No Need For Chrome Anymore 👋 - codeSTACKr](https://www.youtube.com/watch?v=vHZPeohPHqo) ## JavaScript Frameworks - [Comparison with Other Frameworks - vue.js](https://v2.vuejs.org/v2/guide/comparison.html) - [I built the same app 10 times // Which JS Framework is best? - Fireship](https://www.youtube.com/watch?v=cuHDQhDhvPE) - [Understanding client-side JavaScript frameworks - mdn web docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks) ### Virtual DOM Directly changing whole DOM with repeatly rendering the same elements as new items is very costly. ![](https://i.imgur.com/JpzDbdL.png =600x) [Building a Simple Virtual DOM from Scratch - Jason Yu](https://www.youtube.com/watch?v=85gJMUEcnkc) ### CSR / SSR / SSG with SEO [淺談 CSR、SSR 與 SSG](https://ithelp.ithome.com.tw/articles/10291291) - **CSR (Client Side Rendering)**: Browser calls API async functions to download contents. - **SSR (Server Side Rendering)**: Everytime clients request a page server calculate all dynamic content for them beforehand. - **SSG (Static Side Generator)**: Render contents on build stage, perfect for long-static content like *blogs, documents*. > 在主流 Single Page Application (SPA) 框架下，如果全面使用 SSR，把所有資料都在伺服器端處理，其實也不一定有利於 SEO。因為，頁面中的有些內容其實不必參與 SEO 的過程，SSR 只需把「對使用者有價值的資料」渲染完畢，把剩下的部分交由 CSR 處理，使用者可以更快地看到內容，有利於「Googlebot 的 First Contentful Paint」的評分。 > ![](https://i.imgur.com/KodL89b.png) ### Design Patterns [MVC、MVP、MVVM架構比較 - Midium](https://medium.com/learn-record/mvc-mvp-mvvm架構比較-62b5657d2e21) - **MVC (Model－View－Controller)** - **Model**: 獨立的資料結構 for 資料存取 (Ex. database, XMLHttpRequest ...) - **View**: 處理 UI 顯示，唯做：**直接**存取 *Model* 資料、回傳 UI 事件至 *Controller* - **Controller**: handle 所有*行為*和*事件* (Ex. *View* input, *Model* data changed) > In the early days of the Web, MVC architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. However, these days, more of the logic is pushed to the client with the advent of client-side data stores, and XMLHttpRequest allowing partial page updates as required. Frameworks implment like AngularJS, EmberJS. > [MVC - mdn web docs](https://developer.mozilla.org/en-US/docs/Glossary/MVC#mvc_on_the_web) > ![](https://i.imgur.com/kZ3hlo0.png =400x) - **MVP (Model－View－Presenter)** - **Model**: 獨立的資料結構 for 資料存取 (Ex. database, XMLHttpRequest ...) - **View**: 處理 UI 顯示，唯做：**間接**從 *Presenter* 存取 *Model* 資料、回傳 UI 事件至 *Presenter* - **Presenter**: handle 所有*行為*和*事件* (Ex. *View* input, *Model* data changed) ![](https://i.imgur.com/fVnkrrx.png =500x) > 消歧異：MVP in Computer Graphics: *Model-View-Projection* Matrices - **MVVM (Model－View－ViewModel)** - **Model**: 獨立的資料結構 for 資料存取 (Ex. database, XMLHttpRequest ...) - **View**: 處理 UI 顯示 - **ViewModel**: 作為 *View --- Model* 之間的橋樑：由 *View* 事件呼叫 *Model* 資料處理函式；由 *Model* 資料變更更新 *View* UI ![](https://i.imgur.com/nIEBz4K.png =500x) ## Webpack a module bundler for packing .js modules - [[Playlist] Introduction to Webpack - Chris Courses](https://www.youtube.com/playlist?list=PLpPnRKq7eNW2_dy8Re4lyByThMtTAhw5Q) ## UI template ### Pug (以前為 Jade) > HTML rendering script - pug x webpack 教學 [如果你是常切版的前端工程師，你一定要知道pug! - 林罡北](https://northbei.medium.com/%E5%A6%82%E6%9E%9C%E4%BD%A0%E6%98%AF%E5%B8%B8%E5%88%87%E7%89%88%E7%9A%84%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB-%E4%BD%A0%E4%B8%80%E5%AE%9A%E8%A6%81%E7%9F%A5%E9%81%93pug-8b2cbc0a784c) pug (template script) x webpack-pug-loader (compiler) x webpack (packer) => UI auto deployment tool ! ### Color Designing - [如何找出好配色？照著這個步驟做，讓你的設計更具吸引力！！ - PAPAYA 電腦教室](https://www.youtube.com/watch?v=PCYD7codKXQ) ![](https://i.imgur.com/AYAECYF.jpg) ## Profiling Performance - [Measure performance with the RAIL model - web.dev](https://web.dev/i18n/en/rail/) - [Performance Profiling JavaScript - VS Code](https://code.visualstudio.com/docs/nodejs/profiling) ## Write maintainable code > Developers are encouraged to **abstract the different parts of their user interfaces into components** — maintainable, reusable chunks of code that can communicate with one another. > All the code related to a given component can live in one file (or a couple of specific files) so that you as a developer know exactly where to go to make changes to that component. > In a vanillaJS app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. > [Introduction to client-side frameworks - mdn web doc](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) ## WebAssembly portable low-level language designed for *"Containerized"* web applications - [了解 WebAssembly 的基礎使用方法 - TechBridge 技術共筆部落格](https://blog.techbridge.cc/2017/06/17/webassembly-js-future/) - [WebAssembly.org](https://webassembly.org/getting-started/developers-guide/)