Please enable JavaScript.
Coggle requires JavaScript to display documents.
Web Dev, Web Assembly, Web Workers - Coggle Diagram
Web Dev
Client App
Front End Frameworks
Meta-Frameworks
Full Stack
- Often has an an element of server rendering (API calls are made on the server at the time of the request)
- Typically involves clientside "hydrating". AKA first request is server rendered, then things happen clientside (like a Single Page App) for subsequent requests.
-
Next.js
- Opinionated framework that provides configured build tooling and routing.
- Can be server rendered, static rendered, or hybrid
- Offers easy way to build API endpoints
- Can be a little complex to scale properly
- Allows opting out of "server side" bits and can generate a static site for simple hosting.
- Hosting can be tricky if using all of it's features.
-
-
Static Site Generator
- API calls are made at build time and generate valid html pages
- Really fast since you can serve a page that works w/out JS.
- Great for public facing sites (e-commerce, blogs, etc..)
- Less great for sites with mostly user driven data (a user is logged in and sees only their stuff)
-
-
Build Tooling
Looking for things like:
- Transpile JSX
- Importing CSS and image files
- Local dev server
- Hot module reloading
- Production bundling
-
Snowpack
- Really fast!
- Leverages ES Modules for dev
- Uses ESBuild for production bundling
- Barebones, less batteries included
- Competitors: Vite, CRA, Parcel
Vite :<3:
- Really fast!
- Leverages ES Modules for dev
- Rollup.js for production bundle
- Really easy to get started
- Competitors: Snowpack, CRA, Parcel
WebPack
- Most mature and flexible
- Complex to configure
- Leveraged by a LOT of tools under the covers
Parcel
- The original "batteries included" competetor to Webpack
- Getting lapped by the next generation of tooling (EsBuild, Vite, etc...)
Create React App :warning:
- Very easy/simple to get start
- A little heavy
- Check out Vite instead
Rollup.js
- Bundler
- Webpack competitor
-
State Management
- Global State = data that is shared throughout the application. Ex: the logged in user
- Remote State = data where the authoritative version lives on the server. Ex: response from an API call. The difference between global state can be nuanced but important.
- Local State = data that resides in a single component tree. Ex: Form values before the user saves, whether a Modal is open.
Global State
Redux
- Heavy boilerplate
- Consistent/predictable patterns can be beneficial for large teams
- Can be too easy to fall into the "everything in a global store" antipattern
- Good dev tools
-
React Context
- Great for simple scenarios
- Can be easy to screw up (watch out for extra re-renders)
Zustand
- Simple alternative to Redux
- Allows managing data "outside react"
-
-
Specialty Libraries
Routers
- If you are using a meta-framework, it probably comes with a built in routing solution
-
-
-
-
-
-
-
Code Quality / Linting / Formatting
- Try to stick to defaults! Consistency is the goal, not personal preferences
Prettier :<3:
- Running onSave w/ VS Code will save you hours per week!
- Make sure you have a .prettierrc file in your project so everyone's editor settings don't cause formatting commits
-
-
Styling
BEM
- Method of scoping CSS with disciplined class naming conventions
CSS in JS
- Method of scoping CSS using javascript libraries
- Allow more dynamic CSS, but there could be complexity and performance tradeoffs.
- Check the sub tree of your chosen UI Framework for recommended libraries
CSS Frameworks
- CSS Frameworks are just the CSS parts, not javascript driven behavior.
- There are different categories of CSS frameworks like, resets, classless, utility, and semantic
- Utility classes (Tailwind and latest version of Bootstrap) are a growing trend
-
-
-
-
-
SASS :<3:
- CSS Preprocessor to allow things like nested selectors, imports, color utility functions etc...
CSS Modules
- method of scoping CSS by dynamically generating class names.
Component Libraries
- Components that provide both presentation and JS driven behavior
- Check the sub tree of your chosen UI Framework for recommended libraries
- Example: Material-UI (react), Bootstrap could be leveraged as just a CSS Framework or supplemented with it's JS to become component library
PostCSS
- CSS preprocessor that isn't a superset language (like LESS or SASS) but a tool with a plug in architecture
- Lots of flexibility and power, but can be complicated to configure/setup
Specialty Libraries
Dates
date-fns
- immutable functions
- tree shakable
- less flexible api
moment.js :warning:
- no longer maintained
- lacks immutability
- large bundle/no tree shaking
dayjs :<3:
- immutable functions
- small bundle size
- simple api
Immutability
- Helpful in apps that leverage a 1-way data flow pattern
-
-
-
Utilities
- Make sure you are tree shaking. AKA don't include the entire lodash in your bundle, just the functions you need.
-
-
JS Flavor / Language
ESNext
- Usually involves a transpilation step w/ Babel
TypeScript :<3:
- Even if you don't use types, it is worth it for the compiler because it is easier to configure than Babel
- For app development, it is okay to use types a little more loosely.
- For library development lean into the types for the sake of your library consumers.
C# .NET
Blazor
WebAssembly
- A server-less solution, with offline support, that can scale much better than the Server approach.
- Slow initial load due to fetching DLLs.
Server
- A server-based approach which can allow for direct access to secure resources such as a database.
- Handy for heavy server-side operations and/or "hiding" sensitive code.
- Scaling and application latency must be considered due to WebSocket connection.
Testing
Storybook
- Visual Tests of components
- Great for documenting shared components
- Great for collaborating w/ designers
Cypress :<3:
- E2E and Integration tests
Jest
- Good for front end unit tests because it comes with JSDom so you don't have to mock browser APIs
Mocha
- Tried and true / mature
- Excels at unit testing pure functions (and Node.js) that don't leverage browser apis
testing-library :<3:
- Add extension methods to whatever testing framework you are using
- Allows tests to read clearer
MirageJS
- Allows mocking out API calls w/ a clientside in memory database.
- Great option when the client app development precedes backend API development
-
-
-
-
-