What Google's focus on web frameworks means for front-end development [Q&A]
If the recent Chrome Dev Summit was evidence of what Google thinks is hot in web development, then frameworks were one of the clear winners. More specifically, client-side frameworks and libraries like Angular, Vue and React, and larger web frameworks like Next.js.
We spoke to Tim Neutkens, lead developer of Next.js -- which Google mentioned in its talk on Advancing the Web Framework Ecosystem -- to learn more about the rise of front-end frameworks and their general promise to get web developers out of the infrastructure weeds and focus more on building websites and apps.
BN: User Experience and Developer Experience were both frequently-cited themes at the Chrome Dev Summit. Can you tell us a little bit about the current state of UX and DX challenges in web development?
TN: I agree -- UX and DX were big focuses in the event. The Chrome team talked a lot about site performance metrics like first contentful paint, largest contentful paint, and first input delay. Those are key intervals of user interaction and how long pages take to render and respond to users.
Web developers have a lot of inputs to consider to optimize against those metrics -- everything from backend server logic, to data flow and more. Often web developers start off with small, simple web pages or web apps, then later are forced to wrestle with performance concerns. The full picture of concerns that web development touches today has gotten much bigger, and there are a lot of cascading implications for UX. So that’s clearly one of the big challenges of modern web development.
And on the developer experience (DX) side of things, the focus is on making the process of building and scaling these web applications developer friendly. Building a web applications that scales requires a lot of deep knowledge of web application infrastructure like bundling and compilation, this pulls away from building actual website or web app features.
The web framework movement that Next.js is a part of is focused on optimizing web applications to allow web developers to use opinionated tooling that just takes their UI framework code, like React components, and outputs production-ready web applications.
BN: What exactly is Next.js?
TN: Next.js was first released in the end of 2016 and its focus as the Web Framework for React has always been to help web developers get to production really fast, with great developer experience. If you want to start with React and you don’t use a framework like Next.js, then you have to configure, optimize and maintain a lot of critical web application infrastructure like webpack, babel, and so forth. Next.js takes care of the compilation, configuration, optimization, and improving developer experience so that web developers can focus on their web application.
Next.js allows web developers to write React components while providing opinionated ways to do common tasks like data fetching, creating API endpoints and caching. You as a web developer focuses on building your application instead of writing configuration.
Some of the big sites running Next.js are Hulu, TikTok, IGN, AT&T, GitHub, Nike, Ticketmaster, Twitch, Realtor, Uber, and Zillow.
BN: What do you take away from the Google Chrome team's emphasis on frameworks and why they are such a big part of 'making the web better'?
TN: Google talked about the general complexity of building production apps and the number of moving parts web developers have to reason with today. Teams of developers on the hook for shipping applications want to focus on features, not infrastructure. And it makes more sense to use frameworks that bring opinions on things like server-side rendering, HTML chunking, fetching JavaScript CSS data and images, and all the hard things that directly affect user experience. Google is clearly of the mindset that these tough areas are better candidates for collaboration in open source and in frameworks like Next.js, than treated like one-offs by web development teams, reinventing infrastructure solutions.
Image credit: belchonock/Depositphotos.com