TIL, 2021-06-05
11 Must-Know Front-end Trends for 2020
- Micro-frontends: Deployments.
- Atomic design: Atoms, molecules, organisms, concrete web pages.
- Encapsulated styling and Shadow DOM. It is its own isolated DOM tree with its own elements and styles, completely isolated from the original DOM. No need for namespace in the classes.
- Typescript takeover.
- Web components?
- Component libraries to dynamic collections.
- Redux?
- ES Modules.
- Progressive web apps.
- Designer-developer integration.
Atomic Design
- Atoms: HTML tags.
- Molecules: Form label + input + button.
- Organism: Masthead organism = logo + navigation + search form + social media channels.
- Templates: Organisms + molecules.
- Atomic design: Traverses from abstract o concrete.
What is Vercel (ZEIT)?
- Allows developers to set up their projects to a custom domain which puts a protective cover to share encrypted data between the server and browser.
- Github integration: Allows developers to host static websites and web applications that deploy upon every push in branches or merge/pull requests to preview changes live. Also, it scales automatically.
How Vercel Frees Frontend Developers from Backend Burden
- Back-end is no cloud infrastructure, Kubernetes, and off-the-shelf APIs.
- Vercel - gives the front-end developer a completely managed serverless edge infrastructure, so not think about infrastructure investment, just the core application.
- Next.js: How little code is involved in actually making a front-end website or application work.