Lyft's migration to Next.js

дата:
Plus a React advent calendar, useAuth 1.0, and more. |

#218 — December 9, 2020

Read on the Web

🤭 As next week is the last full week before Christmas, we'll be doing a roundup of the most interesting and newsworthy developments of 2020 before taking our Christmas break – see you then! :-)
__
Peter Cooper and Terence C Gannon, your editors

React Status
Your weekly React news digest, every Wednesday

No One Ever Got Fired for Choosing React — In a 21st century riff on that old saying about IBM, the author starts with the goal of building his app without the benefit of any framework. However, in a series of incremental steps he eventually found his way back to the safety of React and its large ecosystem.

Jake Lazaroff

Changing Lanes: How Lyft is Migrating 100+ Frontend Microservices to Next.js — In story with a similar plot, Lyft Engineering had rolled their own framework which was proving increasingly burdonsome. This is at least the beginning of the story of their migration to Next.js with a dash of their own 'special sauce'.

Josh Callender and Andrew Hao (Lyft Engineering)

New Course: Production-Grade TypeScript — Use the TypeScript language at scale to increase the developer experience and productivity of your teams. Learn to manage even the most ambitious TypeScript projects with confidence and ease.

Frontend Masters sponsor

React Christmas: A React Advent Calendar — Just in time for Christmas, here's an advent calendar populated not with trinkets or truffles but rather healthy nuggets of React wisdom, tips and tricks.

Bekk

WMR: A Tiny All-in-One Development Tool for Modern Web Apps — From the Preact team (an ultra lightweight React cloneish) comes an interesting 'everything you need in a single box' tool for putting together JavaScript-powered webapps with bundling, JSX, CSS modules support, and more. Ideal for prototyping. Get started immediately with npm init wmr projectname if you dare.

Preact

useAuth 1.0: A Simple Way to Add Auth to React Apps — We first mentioned this in August 2019 and it got criticism as it only supported Auth0. With 1.0, Netlify Identity is also added, but implementations for other providers are encouraged.

Swizec Teller

📅  At re:Invent Today, Dec. 9, 1pm PT—Nerd Talk with Lew Cirne

New Relic sponsor

Inertia: Not Another Framework — Inertia.js enables the creation of SPAs without client-side routing or an API. A fully featured, working demo is provided.

Inertia.js

A Look at New JSX Enhancements in React 17
Dilantha Prasanjith

💻 Jobs

Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we're looking for a one of a kind Web Developer to join our team.

Komoot

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📘 Tutorials and Stories

Sticky Table Headers with React Hooks — For tabular data presentation, flexbox is often chosen over the seemingly old-fashioned and much maligned <table> element. But the latter can still be a good choice when aided by these techniques.

Miroslav Nikolov

Create React Components Using Hygen — Hygen, a code generator based on Node.js, can be used to efficiently create React components, as this tutorial and associated code illustrates.

Manato Kuroda

How to Fetch GraphQL Data in Next.js With Apollo GraphQL — Still not quite up to speed with GraphQL? In his signature style, this walkthrough takes you through a detailed example using Apollo to show (appropriately) SpaceX launches.

Colby Fayock

Render as You Fetch with React Suspense — The <Suspense> component lets developers build smoother state/page transitions. See how you can use it for data fetching.

Progress KendoReact sponsor

How to Build a Scalable CSS Architecture in React — CSS can sometimes get forgotten along the way to scaling up and ends up being a mess. The author quickly reviews the options of inline styling, stylesheets, Tailwind and CSS-in-JS and then proposes his own scalable CSS architecture.

Frank Barros

Ten Tips for Structuring a React Native Project — With so many options available to React Native developers, specific suggestions as to which to choose can be a good way to finally get your project started.

Kadi Kraman

Building TakeNote, a Notes App for Developers With Github Sync — Back in issue 211 we featured TakeNote. Now the author walks through the logic behind its creation, the lessons learned from building it and why she eventually decided not to ship it.

Tania Rascia

🛠 Code and Tools

supported by Okta

react-headroom: Headers Only When Needed — Headers are important: they are the first thing you see on a page. But they outlive their usefulness fairly quickly (and take up valuable screen real estate) so why not tuck them neatly away until they're needed again?

Kyle Mathews

react-responsive: Respond to Your Runtime Environment — With the explosion of device form factors and capabilities, the need for media queries is more important than ever. This mature library now also has support for hooks.

Eric Schoffstall

React Three Editable: A Visual Editor for react-three-fiber — As the CodeSandbox demo illustrates, you can now edit your scene on screen without the need for a lot of attendant modifications to your underlying code.

Andrew Prifer

Coral: 'Safer, Smarter Discussions' — Not every open source library has the backing of a significant consumer brand like Vox Media. They thought community commenting for their digital properties was broken so here's how they fixed it.

Vox Media

nextein: A Next.js-Based Static Site Generator — For simple static sites, take advantage of the power of Next.js by simply using Markdown. There's starter code to make it easy to get it up and running.

Max Fierro

⚡️ Quick Bits:

Libraries where the name (mostly) says it all:

Комментарии

Отправить комментарий