#frameworks

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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 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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

An introduction to SolidJS UI Library. Explore an example to show the similarity and differences between Hook + Virtual DOM versus Reactivity + DOM.

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.

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 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.