React Summit

React Summit 2024

MDEdit is a tool that converts Markdown into HTML and provides a what-you-get editor. Progressive web apps offer a comparable user experience on both desktop and mobile devices. The Service Worker allows web apps to remain functional even without an internet connection. The Persistent Storage and File Handling APIs enable web apps to store data and access files on the client's device. Project Fugu provides new APIs, including the Font Access API, to bridge the gap between native apps and web applications.

Progressive web apps describe a whole new set of browser features that enable completely new ways of interacting with web applications.While originally intended as an alternative to mobile apps, we are seeing more and more desktop apps that rely on the web platform. Photoshop, Visual Studio Code, Squoosh, Clipchamp and the whole Google Office Suite are just a few examples of a growing number of completely web-based desktop applications - Superwebapps!.In this talk, we will focus on some of the new and exciting browser capabilities that allow us to create powerful React applications that make our daily lives easier. Of course, including tangible examples and an outlook on the browser roadmap.

Superwebapps: Rethinking Desktop Applications With Progressive Web Apps

Nico Martin

Vue.js Live Conference

Vue.js Live 2024

Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.

Data fetching is a critical part of modern web applications. It's a complex problem that has been (partially) solved in many different ways. In this talk, we'll explore the new Data Loaders API for Vue Router, how it compares to existing solutions, and how it can greatly simplify data fetching in your Vue applications.

Data Loaders - Elevating Data Fetching in Vue

Eduardo San Martin Morote

Node Congress

Node Congress 2024

Today's Talk discusses different approaches for implementing real-time updates in server-side applications, including application-level updates and polling. The drawbacks of polling include inefficiency and complexity at scale. Adding extra infrastructure, like messaging systems, can ensure scalability but introduces operational overhead. Prisma Pulse is a system that simplifies change data capture, providing an easy setup for subscribing to database changes and solving scalability issues.

Are you building a chat app, a way to see users’ online status or a real-time collaboration dashboard? All of these use cases have one thing in common: Somehow the user-facing application needs to be informed in real-time about events that happen on the backend of your application.In this talk, we’ll look closely at common approaches like polling, application-level updates and pub-sub systems. We’ll explain the tradeoffs with each approach and elaborate why another approach, called Change Data Capture (CDC), is the most elegant and robust way to achieve this.

How not(!) to Build Real-time Apps

Nikolas Burk

Yash Rajavarma introduces observability and explains its importance for developers. He discusses how OpenTelemetry can empower Node.js applications by providing easy instrumentation and management of telemetry data. OpenTelemetry simplifies the implementation of observability and is designed to benefit developers.

Have you ever considered that when we encounter terms like observability and reliability, our initial instinct is usually to attribute them solely to SRE concerns? Yet, upon closer examination, one may realize that actually implementing observability is, in essence, more aligned with the domain of developers. After all, developers are the ones who directly implement the actual logic into our existing codebase, and who better to understand and debug their code than the developers themselves? Through this session, we will emphasize on understanding the importance of observability specifically from a developer's perspective. Let's explore some best practices that help us effectively debug the performance of our Node application and how the inclusion of open source frameworks like OpenTelemetry could be beneficial to us.

Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry

Yash Verma

React Day Berlin

React Day Berlin 2023

WebAssembly is a binary instruction format for a stack-based virtual machine, enabling deployment of code in languages like Go, Rust, or C++ to run in the browser. It allows for efficient image compression algorithms and whole runtimes like Node.js in the browser. WebAssembly provides a capability-based security layer and eliminates the need to worry about server setup. It is already being used by well-known organizations and platforms, and continues to evolve with upcoming features such as a component model, neural network capabilities, garbage collection, and multithreading. WebAssembly modules can be used in React and as a server tool.

Hold on, WebAssembly on the server?! I thought it was for browser! In this talk, we'll explore the benefits of using low-level languages on the server-side, and the different possibilities that WebAssembly provides for building high-performance web applications. We'll dive into different providers for WebAssembly functions, as well as practical use cases for integrating WebAssembly with React. By the end of this talk, you'll walk away with a deeper understanding of how server-side WebAssembly and React can be used together. You'll also gain practical insights into how to use low-level languages on the server-side, and tips for overcoming common challenges when integrating WebAssembly with React.

WebAssembly and React: A New Era of High-Performance Web Applications

Carmen Huidobro

JS Nation

JSNation 2023

StarBeam is a standalone reactive library that can be intermixed with React. It provides reactive versions of JavaScript built-in collections and allows for dynamic arrays of counters. StarBeam also introduces the concept of remote data API and offers features like invalidation and error rates. It handles errors and reloading, filtering logic, and stable values. StarBeam can be used with various frameworks through renderers and aims to be as universal as possible.

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

Build a Universal Reactive Data Library with Starbeam

Yehuda Katz

Vue.js London 2023

Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.

Introduction to Domain Driven Design<ul><li>- What is DDD?</li><li>- Key principles of DDD</li><li>- Benefits of using DDD in web application development</li></ul>Domain Modeling in Vue 3 Applications<ul><li>- How to design and implement domain models in Vue 3</li><li>- Strategies for integrating domain logic with Vue's reactive data model and component-based architecture</li></ul>Best Practices for Implementing DDD in Vue 3<ul><li>- Strategies for organizing code in a way that follows DDD principles</li><li>- Techniques for reducing coupling between domain and application logic</li><li>- Tips for testing and debugging domain logic in Vue 3 applications</li></ul>

Domain Driven Design with Vue Applications

Abdulrasaq Mustapha

Google processes billions of searches per day, but less than 10% of websites get visitors from Google. SEO is user-focused and requires continuous improvement. JavaScript used to be a challenge for search engines, but now they can handle it. Server-side rendering is a solution for the challenges of single-page applications. Good SEO includes HTTPS, mobile friendliness, core web vitals, and handling URL changes. Meta tags and accessibility are important for SEO. Google Search Console provides valuable insights for tracking keyword performance.

In the world of Single Page Applications, client-side rendering has long been the go-to method for rendering content. However, as SPAs have evolved, other rendering modes have emerged that offer different advantages and disadvantages. In my talk, we will explore why it's important to go beyond a blank page as initial request and explore different rendering modes like SSR, SSG, ISG and more. We'll not only cover the pros and cons of each mode but also provide real and comparable examples. By the end of the talk, you'll have a better understanding of the different rendering modes available for SPAs, and be able to choose the best one for your needs. Join my talk to explore the art of rendering modes.

The Art of Rendering Modes: Go Beyond a Blank Page

Alexander Lichter

React Day Berlin 2022

Today's Talk discusses digital ecology and reducing the carbon footprint of websites. Techniques such as using JavaScript or TypeScript, lighter libraries, and optimizing resources can reduce the carbon footprint by 70%. User data collection is important for sustainability, and the Ecolint tool helps make websites more sustainable. It's an open-source tool that can be downloaded and customized.

Did you know that about 250 000 websites are published every day? The majority uses too heavy fonts, unnecessary images or utilises redundant libraries generating carbon footprint. ec0lint is a tool for frontend developers that mitigates the carbon footprint of websites by showing tips on how to create a more climate-friendly code. Thanks to code optimization ec0lint can help in reducing emissions from 1.8 g to ~0.2 g per one view saving 216 kg CO2 for each website (-88%!) annually.

Digital Ecology: How Can You Mitigate the Carbon Footprint of Websites?

Katarzyna Wojdalska

React Advanced

React Advanced 2022

Today's workshop focused on AWS Amplify, a tool that simplifies the lives of frontend and mobile developers. Participants learned how to create a React app, set up a data model, generate seed data, and use the UI library feature. They also explored pulling components into a Figma project, previewing and binding data to components, and setting up dependencies. The workshop covered rendering components, adding functionality, handling authentication and authorization, and deploying the app. Overall, participants found Amplify to be a quick and efficient way to build and deploy apps with constant improvements in the UI feature.

Learn how to build web apps from design in Figma to deploying to AWS while moving very fast.

Build a Fullstack App Fast with Modern Tools

Christian Nwamba

React Summit 2022

Vodafone uses React technologies at scale to transform into a tech comms provider. They emphasize co-creation, reuse, and standardization. Challenges in transitioning to React Native were addressed through retraining and optimization efforts. Vodafone's web development in React focuses on building to share, inner sourcing, and standards. They have developed a component library and an App Builder ecosystem for faster development and standardization. Integration with Contentful and the use of microcontainers for React-Angular integration were also discussed. The Marketplace project in Turkey utilizes React-JS and WebView technology. Vodafone Italy showcased their architecture transformation using React and TypeScript, emphasizing code quality, standardization, and performance optimization.

React at scale with Vodafone

Today's Workshop focused on building Web3 apps with React using JavaScript, without the need for smart contract code. The Hyperverse was introduced as a community-built, open, and audited platform for modular smart contracts. The Workshop covered topics such as blockchain basics, digital signatures, wallets, fees, and token types. A demo of a Web3 application was showcased, along with the process of confirming transactions and starting a battle between tribes. The Workshop also discussed initializing Hyperverse and modules, connecting wallets, joining and leaving tribes, creating custom tribes, and implementing battle functionality and ERC-721 tokens.

The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.” Learn more about the Hyperverse <a href="https://www.decentology.com/hyperverse">here</a>. We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.

Build Web3 apps with React 

Shain Dholakiya

The workshop on web accessibility in JavaScript apps covers various topics including routing, links, buttons, toggle interfaces, error handling, and custom interfaces. Accessibility is not just for blind people, it helps people with visual impairments, hearing impairments, motor difficulties, and cognitive challenges. The Web Content Accessibility Guidelines (WCAG) provides guidelines for making the web accessible. ARIA attributes can improve accessibility for screen readers, but should be used selectively. Testing with real people and considering their feedback is important for accessibility. Prioritizing accessibility and creating inclusive custom components are crucial. Reducing animations based on user preferences and using tools like Accessibility Insights for Web can help improve accessibility. Demonstrating the impact of accessibility on people's lives can help convince management to prioritize accessibility improvements.

Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps! In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one! Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive! By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)

Web Accessibility in JavaScript Apps

Sandrina Pereira

This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.

Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.

How to Share Code between React Web App and React Native Mobile App in Monorepo

Emily Xiong

JSNation 2022

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.

Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The Next Wave of Web Frameworks is BYOJS

Brandon Roberts

MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

MIDI in the Browser... Let's Rock the Web!

Jean-Philippe Côté

Images, video, and media are crucial in e-commerce to deliver the best user experience. Nike's acquisition of Artifact Studios and the launch of Nike land on Roblox demonstrate the future of e-commerce in the metaverse. Clear and zoomable images, point-based details, and video are essential for enhancing the user experience. Optimizing media delivery through modern image formats, compression, resizing, and technology can significantly improve conversion rates in e-commerce.

Experiences on the web have grown increasingly visual, from displaying product images to interactive NFTs, but not paying attention to how media is delivered can impact Core Web Vitals creating a bad UX with slow loading pages, hurting your store’s conversion and potentially losing sales.How can we effectively leverage media to showcase products creating engaging experiences for our store? We’ll talk about media’s role in ecomm and how we can take advantage of it while optimizing delivery.

Engaging Ecommerce with the Visual Web

Colby Fayock

GraphQL Galaxy

GraphQL Galaxy 2021

Enhost provides a simple and accessible GraphQL backend for web and mobile apps. They offer a serverless infrastructure, taking care of setup and configuration, allowing developers to focus on app development. Enhost's stack includes a Postgres database, a Hasura-powered GraphQL API, Hasura Auth for authentication, Hasura Storage for file uploads, and support for functions in Node.js and Go. The backend is 100% open-source and includes features like event triggers, a CLI for local development, and GitHub integration. With Enhost, there are no excuses not to use GraphQL and build apps that users will love.

Building web and mobile apps with GraphQL should be simple. With Nhost, developers build web and mobile apps with automatically generated GraphQL APIs. In this talk, we'll show you how this is ideal for developers who want to boost productivity without worrying about infrastructure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL for Web and Mobile Apps Made Simple

Johan Eliasson

React Advanced 2021

This Talk explores developing web applications that work without JavaScript enabled in the browser, while still enjoying the benefits of modern web technologies. The speaker demonstrates converting an existing application to work without JavaScript by wrapping buttons in a form and preventing the default submit event. React helpers are introduced to handle async actions and the speaker shows how to make a counter app work without JavaScript by removing unnecessary callbacks and changing buttons to a button component. The talk also covers adding a form and a surprise feature, and emphasizes that by leveraging forms and an event-based store, applications can seamlessly work with or without JavaScript.

A short exploration of a method for building websites that work without JS, while still enjoying the convenience of modern frontend and backend technologies - with live coding! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using Next.JS and Redux for Epic Noscript Web Apps

Daniel Skogly

Recoil is a minimal and easy-to-learn state management library for React and React Native. It supports distributed and incremental state definition, React suspense, and provides hooks like useRecoilValue and useRecoilState. Recoil can be used in both React and React Native applications, allowing for easy reuse of state configurations. Testing Recoil is straightforward, with the ability to observe state changes and compare snapshots. Overall, Recoil is an experimental but promising alternative to Redux.

A group of volunteers all over the world is working on React and React Native apps for the ADHD America program (non-for profit organization). In our work we use Recoil - quite a new React state management tool that looks quite promising. I'll show how we use it in both apps - for web and for mobile and explain why we decided to try it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Reusing App State in React Native with Recoil

Sergii Zhuravel

This workshop covers building for web and native with Ionic and React, including integration, project setup, and app structure. It explores rendering components, positioning with slots, and adding action and translucent properties. The session also covers location tracking with Capacitor and geolocation, exploring native capabilities, and launching the app in the iOS simulator. It discusses real-time updates and state management, implementing a track location feature, and syncing with Android. The workshop concludes with insights on Ionic as a web view component, plugins for native functionality, and available resources.

When building an app, there are many options choices developers need to make. Is it a web app? Does need to be a native app? What should I use for UI? In this workshop will look at how to make use of Ionic for building your app and how to deploy it to not only the web, but native as well. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building for Web and Native with Ionic & React

Mike Hartington

Welcome to React Advance! In this workshop, we'll cover building modern CMS driven web applications using Strapi and Next.js. Headless CMS allows content modeling and delivers content to any front-end via an API, future-proofing your stack and adapting to new front-end technologies. We'll explore setting up Strapi, building collection types, configuring plugins and permissions, and integrating with Next.js to build a static web app with dynamic pages.

In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi. Table of contents: - An introduction to Headless CMS and supported architectures - Getting up and Running with Strapi and Next.js - Integrating Blog functionality into a Next.js app - Deploying your Next.js and Strapi Apps Bonus - Implementing content previews with Next.js Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS

Daniel Madalitso Phiri

Vue.js London Live 2021

Ionic is a platform for building mobile apps using HTML, CSS, and JavaScript. It provides a large ecosystem and has a supportive community. The workshop covers topics such as Vue integration, routing, component rendering, button styling, and native app deployment. Troubleshooting and resources are also discussed. Overall, the workshop provides a comprehensive overview of Ionic and its capabilities.

When building an app, there are many options choices developers need to make. Is it a web app? Does need to be a native app? What should I use for UI? In this workshop will look at how to make use of Ionic for building your app and how to deploy it to not only the web, but native as well. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building for Web and Native with Ionic & Vue

JSNation Live

JSNation Live 2020

Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.

We are very used to generating visual results with code but are still often surprised to hear that we can create music in the same way. Oh, you didn’t know that? You are not alone. Even though the idea of music programming is older than all of us this concept is still pretty unfamiliar among many developers. Not for long! Let's shed some light on music coding in our daily bases web applications using Angular. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

What Does The Angular Say? 🦊

Laura Silvanavičiūtė

The Talk discusses the development of web applications and the challenges involved, such as code management, CI/CD, routing, security, and scalability. It explores the use of Azure Static Web Apps for building and deploying static web apps with features like authorization, authentication, and serverless technology. The process of creating a static web app on Azure Portal is demonstrated, along with resource creation, deployment, and custom domain setup. The Talk also covers API deployment, authentication, authorization, and role-based access control. Azure Static Web Apps is highlighted as a globally distributed solution for building web apps.

You've built an app and you want it to scale. Do you want CI/CD, custom domains, SSL certificates, APIs, global scale of your static assets, authentication, and authorization? Let's learn how to build a static web app on Azure and go from GitHub repo to global scale in minutes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#web apps