├── LICENSE
└── README.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Amila Welihinda
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # front-end-system-design
 2 | 
 3 | A checklist for front end system design
 4 | 
 5 | * Requirements
 6 |     * How many users?
 7 |     * Where are users distributed?
 8 |     * What is our frame budget?
 9 |     * Do we need to support mobile?
10 |     * Offline support?
11 |     * Internationalization?
12 |     * Accessibility?
13 |     * Browser targets?
14 | * Architecture
15 |     * MVC
16 |     * MVW
17 |     * Container/Component Architecture
18 | * Data Flow Model
19 |     * Two Way Data Binding vs Unidirectional data flow
20 | * Component Tree
21 | * Design
22 | * System Walkthrough
23 | * Performance Patterns
24 |     * Fast initial load time
25 |         * App shell architecture
26 |         * SSR
27 |         * Caching
28 |         * Rehydrate application state from prev. cached state
29 |     * Assets
30 |         * Route based code splitting
31 |         * Minification
32 |         * Dead code stripping
33 |     * Network
34 |         * Lazy vs eager loading
35 |         * Service Worker
36 |         * Caching API requests
37 |     * Compute
38 |         * WebGL
39 |         * WebAssembly
40 |         * WebWorkers
41 |         * SharedArrayBuffer
42 |     * UI
43 |         * Optimistic UI
44 |         * Virtual List
45 | * Examples
46 |     * Design a facebook messenger client
47 |     * Design a gigapixel client
48 |     * Design the uber client
49 |     * Design the twitter newsfeed
50 |     * Design the google docs client
51 |     * Design a performance dashboard for a client side app
52 | * Readings
53 |     * [Facebook BigPipe](https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/)
54 |     * [Making slack faster by being lazy](https://slack.engineering/making-slack-faster-by-being-lazy-88da4481baa7)
55 |     * [Design an Image hosting platform](http://www.aosabook.org/en/distsys.html)
56 | 


--------------------------------------------------------------------------------