#frameworks

Subscribe
Frameworks are collections of pre-written code that provide a structure for developers to build applications. Frameworks help developers save time by providing ready-made components and tools that can be used to quickly develop an application. In the JavaScript domain, popular frameworks include React, Angular, Vue, and Node.js. These frameworks provide developers with a set of features such as component-based development, routing, state management, and more. By using these frameworks, developers can create powerful web applications faster and easier than ever before.
htmx Is Pro-JavaScript
JSNation 2024JSNation 2024
22 min
htmx Is Pro-JavaScript
HTMX is a JavaScript library that extends HTML and works with a JSON API. It generalizes the functionality of links and forms, making any element a potential hypermedia control. HTMX simplifies the implementation of hypermedia functionality with a dozen core attributes. It can achieve powerful UI results without writing much JavaScript. HTMX complements JavaScript libraries and enhances user experience by providing functionality that the browser lacks.
Future of Frontend Frameworks Fireside Chat
React Summit 2024React Summit 2024
28 min
Future of Frontend Frameworks Fireside Chat
Fred K. Schott
Minko Gechev
Ryan Carniato
Daniel Afonso
Aakansha Doshi
Tim Neutkens
6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Building a Better Hammer - The Story of Nuxt 4
Vue.js Live 2024Vue.js Live 2024
28 min
Building a Better Hammer - The Story of Nuxt 4
Nuxt is a framework for building web apps using Vue and Nitro, driven by a vibrant open source community. Nuxt 4 aims to make the framework more usable and extensible, while focusing on collaboration rather than competition. The modules ecosystem and pluggable architecture enhance Nuxt's functionality and customization options. Nuxt prioritizes user choice and aims for stability and reliability. Nuxt 4 introduces thoughtful breaking changes and is eagerly anticipated by the community.
10 Years of Vue: the Past and the Future
Vue.js Live 2024Vue.js Live 2024
29 min
10 Years of Vue: the Past and the Future
Hello everyone and welcome to Vue.js Live 2024. In this Talk, Evan Yew, the creator of Vue and Vite, shares a 10-year retrospective on Vue.js, discussing its history, technical impact, and how it is being kept alive. Vue has made significant contributions to the JavaScript ecosystem and is the only mainstream framework that remains independent. The latest release, Vue 3.4, introduced performance improvements and a more efficient reactivity system. Future plans include reactivity efficiency improvements, stabilizing reactive props, and exploring vapor mode. Vue is here to stay and will continue to support the community.
Opt in Design – The New Era of React Frameworks
React Advanced Conference 2023React Advanced Conference 2023
23 min
Opt in Design – The New Era of React Frameworks
Watch video: Opt in Design – The New Era of React Frameworks
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Angular Momentum
JSNation 2023JSNation 2023
22 min
Angular Momentum
Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
The Hidden Cost of Open Source
Vue.js London 2023Vue.js London 2023
11 min
The Hidden Cost of Open Source
Today's Talk discusses the hidden costs of open source software and the importance of estate planning for open source stacks. It highlights the challenges faced by product managers in terms of library upgrades and conflicting priorities. The Talk also emphasizes the steps to establish an end-of-life policy for open source stacks, including monitoring, inventorying, ranking, and outlining upgrade plans. It further emphasizes the need to consider risk, dependencies, and business impact when identifying support dates and upgrade options. The Talk concludes by stressing the importance of being proactive in formalizing an end-of-life policy to avoid costly migration projects.
SolidJS: Reactivity Unchained
JSNation 2022JSNation 2022
20 min
SolidJS: Reactivity Unchained
Solid.js is a declarative JavaScript library for building user interfaces that addresses performance optimization. It introduces fine-grained reactivity and avoids using a virtual DOM. The Talk explores rethinking performance and reactivity in web applications, understanding reactivity and primitives, and creating DOM elements and using JSX in Solid.js. It also covers rendering components, sharing state, and the advantages of fine-grained rendering and the reactive approach in Solid.js.
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.
The Wind and the Waves: The formation of Framework Waves from the Epicenter
JSNation 2022JSNation 2022
19 min
The Wind and the Waves: The formation of Framework Waves from the Epicenter
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Creating Videos... With React!
React Summit 2024React Summit 2024
20 min
Creating Videos... With React!
Today's Talk covers creating videos with React, including using Puppeteer and FFmpeg to build videos frame by frame. The ReMotion library offers advantages such as declarative and reusable components, versioning, and automation. The Talk also demonstrates building a video with ReMotion, embedding previews in React, and customization options. It explores rendering at scale with ReMotion's Lambda or Docker options and the rendering process using Lambdas.
Why the Full-stack Framework of the Future is a DSL
React Summit 2024React Summit 2024
21 min
Why the Full-stack Framework of the Future is a DSL
The Talk discusses the future of web frameworks, suggesting that DSLs will be the way forward. Wasp is introduced as a tool for generating code for client components, server functions, and database models. The benefits of DSLs in web development are highlighted, including simplifying complex tasks and enabling collaboration with AI. Wasp is praised for its ability to capture full-stack engineering tasks and has gained popularity in the web development community.
Introducing Waku: The Minimal React Framework
React Summit 2024React Summit 2024
19 min
Introducing Waku: The Minimal React Framework
I will talk about my recent project, Waku, and my React libraries - Rustand, Jotai, and Valisio. Waku is a React framework that depends heavily on React Server Components (RSC) and aims to make capabilities like code splitting, routing, data fetching, and SSR available to developers. It uses React components based on RSC for reusability and provides a fast experience with VIT, hot reload, and hot module replacement. Waku is under active development, aiming for V1 alpha and exploring Waku-specific features. Deploying Waku apps on Vercel is supported, and a plugin system is in consideration for extended support.
Web Performance: The African Case
JSNation 2024JSNation 2024
22 min
Web Performance: The African Case
Today's Talk discussed web performance and internet penetration in Africa, highlighting the challenges of limited data plans and less powerful devices. The importance of considering internet accessibility when developing websites was emphasized, as slow-loading websites can result in negative reviews and lost customers. The concept of resumability, which delivers only necessary JavaScript for improved performance, was explored, along with the implementation of the QUIC framework to achieve this. QUIC framework was also discussed in terms of lazy execution and its ability to improve website performance and resource consumption.
Web Fortified: Best Practices for Web App Security
JSNation 2024JSNation 2024
22 min
Web Fortified: Best Practices for Web App Security
This Talk, titled 'Fortify or App Fortified', discusses the concept of treating your application as a fortress to protect it from outside threats. It highlights the importance of web application security and the risks associated with broken access control, injection, and cryptographic values. The Talk also emphasizes the need to apply best practices and use frameworks' security features. Additionally, it addresses the security concerns related to user-provided URLs, style injection, and JavaScript injections. The summary concludes by emphasizing the importance of keeping dependencies updated and following best practices to ensure project security.
JS on the Big Screen: Making TV Apps
JSNation 2024JSNation 2024
22 min
JS on the Big Screen: Making TV Apps
JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.
Cross-Framework Libraries with Native Experiences Using React
React Summit 2024React Summit 2024
7 min
Cross-Framework Libraries with Native Experiences Using React
The Talk discusses building cross-framework libraries using React to provide a superior experience for developers across different frameworks. The speaker explains the strategy of rendering React components internally and bridging them to different frameworks. They emphasize the importance of simplicity, understandability, and adherence to best practices in third-party libraries. The speaker also highlights the significance of creating a bridge layer and implementing a complete abstraction to ensure the library's reusability and maintenance.
Angular Renaissance
JSNation 2024JSNation 2024
29 min
Angular Renaissance
Angular and React have similar models of reactivity, with the framework optimizing change detection. Angular introduced signals for optimizing change detection in real-world applications, resulting in improved performance. Deferrable views in Angular allow for lazy loading and significant speed improvements. The island architecture in Angular enables independent component islands without needing hydration. Angular is working on features like partial iteration and zoneless, and aims to support developers in delivering web apps with confidence.
What's New in Astro
JSNation 2024JSNation 2024
29 min
What's New in Astro
Astro is a web framework that aims to optimize site performance without sacrificing functionality. It introduces features such as content collections and view transitions to enhance the user experience. Astro focuses on pushing the web forward by providing browser compatibility and app-like experiences. It also explores a powerful content layer and island architecture for personalized content. Astro is recommended for content-driven websites and offers a polyfill for Safari and integration with Storyblok CMS.
What's Hot On Tresjs V4
Vue.js Live 2024Vue.js Live 2024
20 min
What's Hot On Tresjs V4
Threads.js, a Vue custom renderer for creating declarative 3D scenes, has gained popularity with over 1,700 GitHub stars, 9K monthly NPM downloads, and a strong developer community. Version 4 introduces performance improvements, on-demand rendering, typing support, and memory management. Event bubbling and primitive creation are key features, along with enhanced memory management and scene inspection capabilities. The roadmap includes translated documentation, a new cookbook, and the launch of post-processing and XR VR packages. Performance enhancements, a new 3D course, and updates to Tres Leches UI library are also in the works.
The Full-stack Framework of the Future is a DSL
Node Congress 2024Node Congress 2024
21 min
The Full-stack Framework of the Future is a DSL
The future of web frameworks will be a DSL, simplifying development and allowing for clear instructions for AI collaboration. DSLs like SQL and JSX have value in building better web apps. Wasp is a powerful full-stack web app framework that eliminates the need for writing backend code. It offers features like cron jobs, type safety, and email sending. Wasp also has projects like OpenSaaS and Mage that provide production-ready templates and AI-generated prototypes.
A Nerdy Guide to the Web Trending Concepts
React Day Berlin 2023React Day Berlin 2023
10 min
A Nerdy Guide to the Web Trending Concepts
Watch video: A Nerdy Guide to the Web Trending Concepts
Going to conferences can be overwhelming, so the speaker created a guide to trending web concepts using comic book characters. The chosen topic is resumability, and the story of Tony Stark is used to explain it. Resumability allows for immediate interactivity on a web page and is achieved through serialization and execution of code. The speaker challenges the audience to propose topics for future guides.
Remix: Embracing Web Standards to Redefine Modern Web Development
React Advanced Conference 2023React Advanced Conference 2023
26 min
Remix: Embracing Web Standards to Redefine Modern Web Development
Top Content
Watch video: Remix: Embracing Web Standards to Redefine Modern Web Development
Remix is a web development framework that combines the scalability of server-rendered frameworks with the flexibility of React. It prioritizes web standards and best practices for security. Remix streamlines development with web standards like URLs, fetch API, HTML, and HTTP caching. It simplifies data handling through HTML forms and HTTP, improving user experience. Httpication in Remix reduces server load and speeds up response time, while global search and Storyblock make building complex websites easier.
Shield Your Next.js App With a Content Security Policy
React Advanced Conference 2023React Advanced Conference 2023
6 min
Shield Your Next.js App With a Content Security Policy
Watch video: Shield Your Next.js App With a Content Security Policy
Lucas Esteveau discusses the importance of Content Security Policy (CSP) as an additional layer of security for browsers. He explains how to validate and implement CSP using tools like csp-evaluator.withgoogle.com and observatory.mozilla.org. He also highlights the use of server components and middleware in the Hudafor project to set and enforce CSP directives. Lucas advises starting with a report-only CSP, reviewing the results, and gradually enforcing the policy. He emphasizes the importance of reviewing policy violation reports and iterating the process when making changes.
Why Everybody Needs a Framework
React Advanced Conference 2023React Advanced Conference 2023
39 min
Why Everybody Needs a Framework
Watch video: Why Everybody Needs a Framework
Today's Talk explores the value of using frameworks in software development, specifically focusing on React and its impact on web development. The Talk delves into the benefits of frameworks, such as solving routing and data fetching challenges, handling edge cases, and providing server-side rendering. It also introduces the concept of server components and their role in server-side rendering. The Talk highlights the advantages of soft navigation and the seamless communication between client and server. Overall, frameworks offer valuable functionality that enhances productivity and addresses common development challenges.
Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
React Advanced Conference 2023React Advanced Conference 2023
29 min
Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
Watch video: Jazz: Build Real-Time, Local-First React Apps With Sync & Secure Collaborative Data
JAS is a new framework for building apps around sync and secure collaborative data, promising to simplify app development by eliminating unnecessary complexity. CoJson is an abstraction that simplifies app development by implementing multi-device co-editing, user identities, permissions, sync, caching, and persistence. Jazz is an open source framework that provides idiomatic bindings for CoJSON, specifically in the browser. JAS provides powerful sync and storage capabilities, eliminating the need for external blob storage. Jazz React allows developers to use React and provides automatic subscriptions for reactive updates to core values. JAS offers instant interaction, offline sync, and the ability to rebuild Twitter with Jazz.
Exploring the TypeScript-first architecture of modern frameworks
TypeScript Congress 2023TypeScript Congress 2023
25 min
Exploring the TypeScript-first architecture of modern frameworks
Hi, everyone. Today, I'll be showing you some of the features that modern frameworks implement or frameworks that leverage Typescript implement to improve the developer and user experience. I'll cover some of the features that Expo with Expo Router and Next.js with the AppRouter implements. Let's talk about setting up TypeScript in both Expo and Next.js. Both frameworks provide a TypeScript-first development experience. The most important feature is type safe routing, which enhances developer productivity and app stability. Frameworks provide a built-in link component for link generation. It reduces the risk of typos and throws type errors when linking to non-existent routes. In Expo, enable the .typed experiment and import the link component from the exporouter package. Expo supports static and dynamic routes, and throws errors for incorrect parameters. ExpoRouter provides hooks like UseSegments and UseRouter for more control. In Next.js, enable typedRoutes in the next config file. We can import the link component from the next link package and restart the dev server after updating the next config file. Next.js automatically generates route definitions and includes the type file in the TS config. Autocompletion is available for the href attribute, which can be a string or dynamic value. Next.js provides hooks like use router for static navigation and router.push to prevent redirection to broken routes. Catch all routes in type safe routing pose a challenge for enforcing type safety on the href attribute. TypeScript may not throw an error for routes that may be broken or lead to unwanted pages. Keep this in mind when working with catch all routes. Before a production build, route types should be in place to ensure accurate type definitions. Generating routes is an ongoing task that needs to happen at the right moment to avoid build-time errors. When implemented correctly, type-safe routes can elevate the developer experience by preventing broken links or dysfunctional routes. In Next.js, server components and client components have different limitations. Next.js provides automatic error checking for importing useState in server components and enforces the useClientDirective to prevent using client-related code in the wrong places. Next.js also ensures type safety by throwing errors for invalid segment config options and requiring the alt attribute for image components to improve accessibility. Config files in Expo and Next.js have different approaches to incorporating TypeScript, with Expo using the TS node require hook and Next.js supporting type checking through jsdoc in the config JS file. By enabling type-safe routing, we catch potential issues at compile time, ensuring robust routes and unbroken links. Many other frameworks and tools leverage TypeScript to empower developers and deliver error-free experiences to users.
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Comparing JavaScript Frameworks Performance Using Real-World Data
JSNation 2023JSNation 2023
28 min
Comparing JavaScript Frameworks Performance Using Real-World Data
Top Content
The choice of framework impacts website performance. Lab tests and field data are used to measure performance. Core Web Vitals are important metrics for performance evaluation. New frameworks that prioritize speed are emerging. MetaFrameworks like QUIC, SolidStart, Astro, and Nuxt show promise in improving performance. React frameworks like Gatsby and Remix perform well. Wix has a significant impact on React's performance. Framework choice significantly impacts the probability of building a fast website. Improvement is needed in framework performance.
How I Like to Write JavaScript
JSNation 2023JSNation 2023
26 min
How I Like to Write JavaScript
Caleb Porzio introduces Alpine JS, a JavaScript framework, and demonstrates the process of creating a scrappy version of AlpineJS and refactoring it. The Talk covers topics such as creating a Dom Walker, evaluating expressions, using mutation observers, and refactoring the code. It also discusses techniques like inverting conditionals, using callbacks, and parameter currying. The Talk emphasizes the importance of abstraction, handler extraction, and a declarative approach in software development.
Should You Use React in 2023?
React Summit 2023React Summit 2023
31 min
Should You Use React in 2023?
Top Content
Watch video: Should You Use React in 2023?
Tru Narla
Jordan Gensler
2 authors
React is a popular choice, but there are claims that it's dead and should be replaced. React has good out-of-the-box performance and is suitable for most applications. React Native allows code sharing between React and React Native. When considering a migration from React to Svelte, there are trade-offs to consider. React offers a standardized way of working and easy onboarding.
React + WebGPU + AI – What Could Go Wrong? 😳
JSNation 2023JSNation 2023
31 min
React + WebGPU + AI – What Could Go Wrong? 😳
With AI and web GPU, it's an exciting time to be a developer. The speaker's journey involves combining programming and design, leading to the creation of Pure Blue, a powerful programming environment. Adding AI to the mix, the speaker discusses the potential of AI in the creative process and its impact on app development. The talk explores the role of React components and WebGPU in enabling fine-grained editing and running AI models locally. The future of app development is discussed, emphasizing the need to stay ahead of the curve and leverage the power of JavaScript.
Conquering Forms in Vue
Vue.js London 2023Vue.js London 2023
24 min
Conquering Forms in Vue
Today's Talk focused on building forms in Vue using FormKit. The speaker highlighted the simplicity of forms in Vue and the importance of adding buttons, labels, and help text for a better user experience. They also discussed handling form data and errors, refactoring form components, and implementing inline validation. The introduction to FormKit showcased its features such as a single component approach, automatic data collection, and simplified form building. The talk also covered applying validation and form generation using the FormKit schema, which allows for easy form representation and rendering.
Building for the Edge - Crafting a Next-Gen Framework
Vue.js London 2023Vue.js London 2023
32 min
Building for the Edge - Crafting a Next-Gen Framework
NUXT is a framework for building web apps that has undergone significant changes with the introduction of Nitro, a new server. The Talk covers topics such as building a framework with Nitro, rendering a view app, configuring Nitro and Vite, and integrating Nuxt with an existing Vue 2 project. The collaboration between Nuxt and Chrome has resulted in performance improvements, and the future of Nuxt and Nitro looks promising with new ideas and extensions being developed.
Fresh: a new full stack web framework for Deno
Node Congress 2023Node Congress 2023
24 min
Fresh: a new full stack web framework for Deno
Today's Talk introduces Fresh, a full-stack web framework for Deno, and covers its features, such as static files, routes, and data-fetching. It also discusses middleware, error pages, and styling options. The Talk explains the Islands architecture used by Fresh to enable client interactivity. The demo showcases the use of hybrid routes and islands components, and resources for Fresh, Deno, Preact, TypeScript, and web standards are provided.
Astro & Fresh - Understanding the Islands Architecture
React Advanced Conference 2022React Advanced Conference 2022
21 min
Astro & Fresh - Understanding the Islands Architecture
The islands architecture is a new way to build websites with low or no JavaScript, using libraries like Astro and Fresh. Server-side rendering improves SEO and loading times, but can still result in large JavaScript payloads. Hydration allows for islands of interactivity, loading only necessary JavaScript. Astro is a framework for implementing the islands architecture, supporting multiple libraries like React and SolidJS. It enables progressive migration between frameworks and integration of different libraries in the same project.
Lessons Learnt While Creating a New Framework on Top of React
React Advanced Conference 2022React Advanced Conference 2022
20 min
Lessons Learnt While Creating a New Framework on Top of React
React is a versatile tool that goes beyond front-end development and can be used for synthesizing music. Creating a specialized framework with React requires understanding the tooling ecosystem and React's design philosophy. Examining good codebases like createreactapp can accelerate development. Handling side effects and module replacement can be achieved through techniques like dead code elimination and hot module replacement. Maintaining component state and implementing hot module replacement are important considerations for a React application.
React Remixed
React Advanced Conference 2022React Advanced Conference 2022
8 min
React Remixed
Remix is a full-stack web framework that embraces the server-client model and leverages browsers, HTTP, and HTML to deliver a fast user experience. It allows you to have a data layer and use the basics of browsers, HTTP, and JavaScript. Nested routing in Remix enables easy addition of nested sections to your application.
Instant websites using Fresh and Deno on the Edge
React Advanced Conference 2022React Advanced Conference 2022
33 min
Instant websites using Fresh and Deno on the Edge
The Talk discusses the concept of instant websites, aiming to minimize the time between user interaction and unblocking the user. It emphasizes prioritizing the loading of primary content and delaying the loading of secondary content to improve page loading times. Server-side rendering is highlighted as a faster alternative to client-side rendering, reducing network round trips and improving rendering times. The concept of island architecture is introduced, where only the JavaScript needed for interactive components is shipped to the client. The Fresh web framework is presented as a speed-focused framework for Deno, offering automatic CSS inlining and using Preact for client-side interactivity.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.
How Blitz.js Makes Fullstack Web Development a Breeze
JSNation 2022JSNation 2022
8 min
How Blitz.js Makes Fullstack Web Development a Breeze
Bleach.js is a toolkit designed to make full-stack web development enjoyable. It is built on top of Next.js and includes features like authentication, authorization, Prisma setup, React Query, utilities, recipes, and code scaffolding. The upcoming version, Blitz 2.0, is being worked on. Blitz.js toolkit expands on the core framework with additional features like web sockets, scheduled jobs, mailers integration, and better mobile app support. Visit canary.blitz.js.com for documentation on the new toolkit and blitz.js.com for framework documentation.
5 Years of Building React Table
React Summit 2022React Summit 2022
24 min
5 Years of Building React Table
Top Content
React Table is a popular table library that started with HTML5 tables and transitioned to React. It faced challenges with integration and user requests, leading to the development of React Table. The introduction of the Headless UI pattern and TypeScript support improved the library's capabilities and quality. Generics and TypeScript played a significant role in reducing the code size and improving development. React Table is now going framework agnostic and partnering with AG Grid.
Tauri Foundations and Futures
JSNation 2022JSNation 2022
22 min
Tauri Foundations and Futures
Tauri is a tool built to improve the JS ecosystem, providing a lightweight alternative to Electron. It integrates the stack, focuses on security, and offers cross-platform compatibility. Security measures include a new iFrame interaction and a thorough audit. The importance of taking care of the planet and reducing app consumption is emphasized. Tauri's community, licensing, and future plans are discussed, as well as the challenges of web view support and the aim to create a consistent engine using Servo.
A Glimpse Into the Future of Fullstack Development with Blitz.js
Node Congress 2022Node Congress 2022
32 min
A Glimpse Into the Future of Fullstack Development with Blitz.js
Today's Talk introduced Bleeds.js, a full-stack React framework built on top of Next.js. It eliminates the need for an API layer, allowing server code to run directly from the frontend. The Blitz framework is pivoting towards a framework-agnostic toolkit to bring more people to Bleeds and decouple it from any specific runtime. The new Bleed toolkit will include core features like zero API data layer and authentication, with additional features like JWT authentication and advanced data-aware authorization. The audience showed interest in the Blitz Pivot concept and the ETA for the stable 1.0 release is the end of March.
How Typed is Your Framework?
React Advanced Conference 2021React Advanced Conference 2021
25 min
How Typed is Your Framework?
Today's Talk focused on the importance of TypeScript in preventing runtime errors and its integration with popular frameworks like Vue.js, Angular, and React. TypeScript provides error assistance and typing boundaries between components, ensuring correct usage. It also allows for the creation of generic components, leveraging TypeScript generics to define contracts between unknown properties. The Talk highlighted the use of TypeScript in various scenarios, such as working with React Node, and provided resources for further learning and exploration.
SolidJS - Reactive JSX
React Finland 2021React Finland 2021
28 min
SolidJS - Reactive JSX
An introduction to SolidJS UI Library. Explore an example to show the similarity and differences between Hook + Virtual DOM versus Reactivity + DOM.
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Say No To Complexity With AlpineJS
JSNation Live 2020JSNation Live 2020
33 min
Say No To Complexity With AlpineJS
Alpine.js is a lightweight framework for creating JavaScript behavior directly in markup. It has 13 directives and 6 magic properties, making it like Tailwind for JavaScript. The upcoming version of Alpine will focus on performance and optimization. It sits between jQuery and Vue, offering reactivity without compilation. Alpine.js is robust and resilient for DOM manipulation, and works well with Laravel for localization and internationalization.
1, 2, 3... Fastify!
JSNation Live 2020JSNation Live 2020
36 min
1, 2, 3... Fastify!
Fastify is a web framework that started in 2016 and is easy to use. It supports logging, splitting the app into separate files, and auto-loading routes. Fastify also provides authentication and user login functionality. It differs from other frameworks by fully supporting Async Await and the latest JavaScript features. Matteo Collina, the speaker, prefers Vim and T-Max as his IDE and enjoys Italian pizza as his comfort food.
Blitz.js - The Fullstack React Framework
React Summit 2020React Summit 2020
32 min
Blitz.js - The Fullstack React Framework
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.