Building high-performance web applications with Preact

Sep 22, 2017Download as PPTX, PDF0 likes453 views

The document discusses building high performance web applications with Preact. It introduces Preact as a fast and lightweight alternative to React, highlighting its small file size and ability to run React components with minimal changes. It also covers the PRPL pattern for progressive web apps, which pushes critical resources, renders the initial route, pre-caches remaining routes, and lazily loads remaining routes for optimal performance.

Building high
performance web
applications with Preact
Maurice de Beijer
@mauricedb

Topics
 Why performance?
 Why Preact?
 ProgressiveWeb Apps
 The PRPL pattern
© ABL - The Problem Solver 2

 Maurice de Beijer
 The Problem Solver
 MicrosoftAzure MVP
 Freelance developer/instructor
 Twitter: @mauricedb, @NG_Tutorial and @React_Tutorial
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
3

Try it  https://bit.ly/dnz-preact
© ABL - The Problem Solver 4

Why performance?
© ABL - The Problem Solver 5

Why
performance?
 40% of the website traffic is from mobile devices.
 Bol.com in July 2016
 Adding 100 ms of latency costs 1% of sales.
 Amazon.com
© ABL - The Problem Solver 6

What is fast?
© ABL - The Problem Solver 7

It depends 
© ABL - The Problem Solver 8

“Performance is the art of
avoiding work, and
making any work you do
as efficient as possible”
-- Paul Lewis --
© ABL - The Problem Solver 9

DOMContent
Loaded
© ABL - The Problem Solver 10

First
meaningful
paint
© ABL - The Problem Solver 11

Time to
interactive
© ABL - The Problem Solver 12

Right size
framework
© ABL - The Problem Solver 13

Why Preact?
© ABL - The Problem Solver 14

Jason Miller
@_developit
© ABL - The Problem Solver 15

Preact
=
React +
exercise
© ABL - The Problem Solver 16

A Preact
component
import { h, render, Component } from 'preact’; // <= h() replaces React.createElement()
class Clock extends Component { // <= Always ES2015 classes
constructor() {
super();
this.state.now = new Date();
}
componentDidMount() {
this.timer = setInterval(() => this.setState({ now: new Date() }), 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render({}, {now}) { // <= props and state passed
return <span>{ now.toLocaleTimeString() }</span>;
}
}
render(<Clock />, document.body); // <= render() instead of ReactDOM.render()
© ABL - The Problem Solver 17

Babel
{
"plugins": [
["transform-react-jsx", { "pragma":"h" }]
]
}
© ABL - The Problem Solver 18

What is
missing?
 PropType validation.
 Part of preact-compat
 React.Children.
 Part of preact-compat
 Synthetic Events.
 Preact only targets the Browser
 Context is simplified.
© ABL - The Problem Solver 19

“It's easier to make a
fast app than to speed
up a slow app”
-- Me --
© ABL - The Problem Solver 20

$ECMAScript imports import _ from 'lodash'; _.forEach(data, e => console.log(e)); © ABL - The Problem Solver 21 import { forEach } from 'lodash/forEach'; forEach(data, e => console.log(e));$

Use source-
map-explorer
© ABL - The Problem Solver 22

ProgressiveWebApps
& the PRPL Pattern
© ABL - The Problem Solver 23

PRPL
 Push critical resources for the initial URL route.
 Render initial route.
 Pre-cache remaining routes.
 Lazy-load and create remaining routes on demand.
© ABL - The Problem Solver 24

Render initial route
© ABL - The Problem Solver 28

Server side
rendering
© ABL - The Problem Solver 29

Prerendering
© ABL - The Problem Solver 30

Inline
critical
CSS
© ABL - The Problem Solver 31

Pre-cache
remaining routes
© ABL - The Problem Solver 32

Cache using
ServiceWorker
© ABL - The Problem Solver 33

Lazy-Loading
© ABL - The Problem Solver 34

Code splitting
© ABL - The Problem Solver 35

Only render
above the fold
© ABL - The Problem Solver 36

Conclusion
 Everyone loves faster web apps.
 And they are good for business
 Do as few request as possible to display the first page.
 The fastest HTTP request is one not made
 Use the PRPL pattern
 Preact is small and fast.
 The CLI gives you most of the PRPL pattern out of the box
© ABL - The Problem Solver 37

Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 38

With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet? There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more. Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more. https://reactadvanced.com/workshops-3h

Starting with ReactjsThinh VoXuan

This document provides an introduction and overview of ReactJS. It discusses that React is a JavaScript library developed by Facebook and Instagram for building user interfaces. It introduces key React concepts like components, props, state, lifecycles, and differences between imperative and declarative programming. It also covers setting up a basic React project using tools like Webpack and Babel and references additional React resources.

Introduction to react_jsMicroPyramid .

React is a JavaScript library for building user interfaces. It was created by Facebook and is best for building dynamic websites like chat applications. React uses a virtual DOM for efficiently updating the view after data changes. Components are the building blocks of React and can contain state and props. The document provides an example of a simple component class and demonstrates how to add state and props. It also includes links to example code and MicroPyramid's social media profiles.

Workshop React.jsCommit University

The document provides an introduction and overview of ES6, React, and Redux. It begins with an in-depth section about new features and syntax in ES6, including variable types, arrow functions, modules, classes, and more. It then discusses React, explaining concepts like the virtual DOM, one-way data flow, JSX syntax, props, nested components, conditionals, and state/setState. Finally, it briefly introduces Redux and mentions using React components on the server and in mobile apps with React Native.

Gatling - Bordeaux JUGslandelle

The document discusses the importance of performance and load testing web applications. It defines performance as how fast, robust, and resource-effective a system is. Load testing involves stressing an application with simulated user load to determine its capacity and stability under heavy usage. The document outlines best practices for load testing methodology, tooling, and interpreting results to optimize performance. It promotes using an asynchronous, non-blocking tool like Gatling for efficient, maintainable load testing that provides meaningful reports.

Intro to ReactSheilaJimenezMorejon

This document provides an introduction to React including what React is, what will be covered in the workshop, what tools and skills are needed, and how to get started with a basic React app. React is introduced as a front end JavaScript library for building user interfaces. The workshop will cover building a chatroom app using React and Firebase. Developers will need a text editor, Node.js, programming experience, and familiarity with JavaScript and HTML. The document demonstrates how to initialize a React project and covers key React concepts like JSX, components, props, states, and event handling.

Demystifying frontend framework performanceVinh Nguyen

The document discusses frontend framework performance, explaining that performance depends on the specific scenario and implementation. It outlines different approaches frameworks take to updating the DOM (dirty checking, dependency tracking, virtual DOM) and their pros and cons. Key points are that most benchmarks only reflect limited aspects of performance, performance is scenario-dependent, and ease of optimization is important to consider. Developers should understand their own app's priorities and take benchmarks with skepticism rather than as absolute comparisons between frameworks.

Internal workshop react-js-mruizMiguel Ruiz Rodriguez

Reactjs workshop Ahmed rebai

The document outlines a React workshop covering what React is, its core concepts, and coding with React. It begins with an introduction and overview of React. It then covers key React concepts like components, the virtual DOM, JSX, state and props. Finally, it demonstrates how to start coding with React by rendering a component, using state, and working with forms. Resources for further learning are also provided at the end.

TestWorks Conf Performance testing made easy with gatling - Guillaume CorréXebia Nederland BV

The document outlines an agenda for a Gatling workshop. It covers exercises on using Gatling's architecture and DSL for load testing. The exercises range from basic to more advanced topics like making dynamic requests, capturing response data, and iterating over elements. Guidelines are provided for each exercise on things like the appropriate checks, feeders, and DSL elements to use. The document also notes that solutions to the exercises will be made available after the workshop.

learning reactEueung Mulyana

The document discusses React, a JavaScript library for building user interfaces. It begins by explaining what React is, its core principles of being declarative, efficient and flexible. It then covers React basics like using JSX syntax, maintaining a virtual DOM, one-way data flow and building reusable components. The document also provides examples of adding state and properties to components. Finally, it discusses thinking in React and walks through building a searchable product table as an example.

Simple todo app with meteorAlex Long

Meteor is a full-stack JavaScript framework that allows developers to build web applications quickly using a single programming language. It includes a development environment to build the app, a database (MongoDB), and communication protocols (DDP) to connect the client and server. The document demonstrates a simple Todo app built with Meteor that allows users to create, update, and mark tasks as complete. Templates are used to display tasks and counts, while events and helpers interact with the Tasks collection in MongoDB to add, update, and filter data.

React and Flux life cycle with JSX, React Router and Jest Unit TestingEswara Kumar Palakollu

React in productionMichael Haberman

Getting Started with React-Nathan SmithTandemSeven

This document provides an overview and introduction to React, including: - An introduction to the speaker and slides/resources for the talk - A comparison of React and Angular - An overview of common components in a React app: React, Redux, Router - Setting up a basic React project with many dependencies - Explanations of key React concepts like components, props, and state - Examples of component structure and organization in a React project

React on es6+Nikolaus Graf

Introduction to ReactJSHoang Long

This document introduces ReactJS, a JavaScript library for building user interfaces. It discusses key React concepts like the virtual DOM, which is a JavaScript representation of real DOM elements that allows React to efficiently update the real DOM by comparing it to a new virtual DOM. It also covers one-way data binding in React, where data flows from parent to child components through props, while events flow in the opposite direction. Finally, it emphasizes that in React, everything is a component, and components manage their own state and receive immutable props from parent components.

Learn react-jsC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

The document provides an introduction to ReactJS, including: - ReactJS is a JavaScript library developed by Facebook for building user interfaces. - It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered. - Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen. - The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().

Introduce Flux & react in practices (KKBOX)Hsuan Fu Lien

Flux is an application architecture pattern for building user interfaces that uses unidirectional data flow. React is a view library that handles the visual DOM and component lifecycle. Flux uses a dispatcher to facilitate one-way data flow from the actions to stores to views. Stores hold the application state and trigger changes that cause React components to re-render. Together, Flux architecture and React components allow building large web applications in a predictable and performant way.

Hands On, Duchess 10/17/2012slandelle

React Fundamentals - Jakarta JS, Apr 2016Simon Sturmer

This document discusses React fundamentals and why React is a good choice for building user interfaces. It explains that React uses a component-based approach where each component is a pure function of state. This makes the UI easy to reason about and improves testability, performance, and code reuse. It also notes that React uses immutable data structures and re-renders the entire UI when state changes, similar to how server-side rendering works. This avoids issues with directly manipulating the DOM and helps developers build more reliable software faster.

ReactJS.NET - Fast and Scalable Single Page ApplicationsRick Beerendonk

Introducing Facebook's React and ReactJS.NET @ Microsoft's TechDays 2015 in The Netherlands. Is the HTML of your SPA also filled with unmaintainable semi code? Is data binding performance causing you headaches? Don’t you remember how data finds its way to the UI? Let's React! There is a new functional approach to tackle traditional complexities in JavaScript: ReactJS (open source). Maligned in 2013, embraced in 2015 by the largest websites in the world. Let's build fast components in a lasting and meaningful way. This session is a full introduction to the React JavaScript library, its virtual DOM and synthetic events. ReactJS.NET for ASP.NET MVC (and OWIN) will be covered as well. With ReactJS.NET your app starts with a server side rendered page, ideal for search engine optimization (SEO). Does your page need to work under IE8? No problem! The best part: You do not have to build your entire site with ReactJS, but you can start with any parts you like. Afterwards this talk you can immediately apply React in your daily work. See http://reactjs.net and http://reactjs.com

Debugging with VS2019Mirco Vanini

The document discusses debugging tips and tricks for .NET developers using Visual Studio 2019. It covers topics like launch options, stepping through code, return values, conditional breakpoints, the immediate window, exception settings, call stacks, performance profiling tools, UI debugging for XAML, and diagnostic tools. The presentation was given by Mirco Vanini and introduces debugging concepts and demonstrates features in Visual Studio.

Futureproof angular 1.x applications - yannick houbrixAxxes IT Consultancy

GatlingTengwen Wang

Pitfalls in Performance Testing AxxesCC 06/2015Axxes IT Consultancy

Zijn performantietesten noodzakelijk voor je project? Hoe begin je eraan? Welke kennis, tools en ervaring heb je nodig of moet je inhuren? Verschilt de aanpak voor een online applicatie van een backoffice applicatie? Wat gedaan als de performantie onvoldoende is? Wouter Soubry, Software Quality & Application Performance Consultant bij Axxes, maakt in deze presentatie komaf met al deze pitfalls bij Performance Testing.

Gatling Performance WorkshopSai Krishna

React js programming conceptTariqul islam

Building high performance web applicationsMaurice De Beijer [MVP]

This document discusses building high performance web applications. It covers topics like what defines a fast application, useful tooling for measuring performance like the Chrome DevTools and WebPageTest, code splitting techniques, server side rendering, only rendering content above the fold, and minimizing HTTP requests and latency. The presenter emphasizes avoiding unnecessary work, doing as little as possible to display initial content to the user, and leveraging the browser and server capabilities to build fast and high performing web applications.

Building high performance web applicationsMaurice De Beijer [MVP]

More Related Content

What's hot (20)

Reactjs workshop Ahmed rebai

TestWorks Conf Performance testing made easy with gatling - Guillaume CorréXebia Nederland BV

learning reactEueung Mulyana

Simple todo app with meteorAlex Long

React and Flux life cycle with JSX, React Router and Jest Unit TestingEswara Kumar Palakollu

React in productionMichael Haberman

Getting Started with React-Nathan SmithTandemSeven

React on es6+Nikolaus Graf

Introduction to ReactJSHoang Long

Learn react-jsC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Introduce Flux & react in practices (KKBOX)Hsuan Fu Lien

Hands On, Duchess 10/17/2012slandelle

React Fundamentals - Jakarta JS, Apr 2016Simon Sturmer

ReactJS.NET - Fast and Scalable Single Page ApplicationsRick Beerendonk

Debugging with VS2019Mirco Vanini

Futureproof angular 1.x applications - yannick houbrixAxxes IT Consultancy

GatlingTengwen Wang

Pitfalls in Performance Testing AxxesCC 06/2015Axxes IT Consultancy

Gatling Performance WorkshopSai Krishna

React js programming conceptTariqul islam

Reactjs workshop Ahmed rebai

TestWorks Conf Performance testing made easy with gatling - Guillaume CorréXebia Nederland BV

learning reactEueung Mulyana

Simple todo app with meteorAlex Long

React and Flux life cycle with JSX, React Router and Jest Unit TestingEswara Kumar Palakollu

React in productionMichael Haberman

Getting Started with React-Nathan SmithTandemSeven

React on es6+Nikolaus Graf

Introduction to ReactJSHoang Long

Learn react-jsC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

Introduce Flux & react in practices (KKBOX)Hsuan Fu Lien

Hands On, Duchess 10/17/2012slandelle

React Fundamentals - Jakarta JS, Apr 2016Simon Sturmer

ReactJS.NET - Fast and Scalable Single Page ApplicationsRick Beerendonk

Debugging with VS2019Mirco Vanini

Futureproof angular 1.x applications - yannick houbrixAxxes IT Consultancy

GatlingTengwen Wang

Pitfalls in Performance Testing AxxesCC 06/2015Axxes IT Consultancy

Gatling Performance WorkshopSai Krishna

React js programming conceptTariqul islam

Similar to Building high-performance web applications with Preact (20)

Building high performance web applicationsMaurice De Beijer [MVP]

This document discusses building high performance web applications. It covers topics like what defines a fast application, tools for measuring performance like Chrome DevTools and WebPageTest, techniques like code splitting, server-side rendering, only rendering content above the fold, and using service workers. The goal is to avoid unnecessary work, optimize code and assets, and leverage the browser and network effectively to improve performance.

Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]

This document discusses several topics related to frontend development including TypeScript, hosting, testing, APIs, and runtime errors. It provides information on using TypeScript for type safety and features like mapped types and ES modules. For hosting, it recommends Azure Blob storage and CDN for production and Vite for development. It also discusses test-driven development including using Cypress for end-to-end tests. Managing API types and updates using OpenAPI and NSwag is described as well as handling runtime errors with Application Insights.

Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://www.meetup.com/nl-NL/tilburg-tech-tuesdays/events/277150883/

Better React state management with ReduxMaurice De Beijer [MVP]

This document outlines a workshop on using Redux for state management in React applications. It introduces Redux, its core principles of single source of truth, state is read-only, and changes are made with pure functions. It demonstrates setting up a sample application with Redux, including actions, reducers, the store, middleware, and connecting React components. The document guides integrating Redux for user login/logout, loading movies data, playing movies, and filtering movies.

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

Een kleine React applicatie bouwen met een backend is niet moeilijk. Maar wat als de applicatie groter en complexer wordt? Dan wordt het een ander verhaal. En al helemaal als het een publiek toegankelijke applicatie is. Plotseling blijkt dat allerlei vaak gedane aannames niet meer kloppen. Je krijgt te maken met netwerkstoringen en schaalbaarheid. Verschillende teams die onafhankelijk van elkaar aan de front- en backend werken. Runtime fouten die optreden omdat sommige browsers toch net even anders blijken te werken dan je verwacht. In deze sessie gaat Maurice de Beijer zijn ervaringen delen over hoe je dit aan kan pakken.

Mastering React Server Components and Server Actions in React 19Maurice De Beijer [MVP]

Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints. Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic. Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

Design Based Devrajivmordani

The document discusses the challenges of traditional web application development where designers are separated from programmers after the initial design phase. This often results in the programmer's code being incomprehensible to designers. The document proposes an alternative design-focused paradigm where web applications are conceptualized as dynamic web pages that fetch data from a database and transition between pages based on user interaction or database content. This view retains the designer's role throughout the development process.

Impact2014: Practical Performance TroubleshootingChris Bailey

This session discusses how to maximize the performance of an application deployment with tools that are native to the server platform, as well as cross-platform Java analysis and monitoring tools include IBM Health Center and IBM Service Engage. The session begins with systematic steps organizations can take to locate a performance problem in a complex system and moves on to analysis they can do to understand the root cause of the problem. The picture is completed by consideration of the tools and techniques available to monitor application performance in normal operation so that organizations can catch performance issues before they build up into serious problems.

Hacking the Mid-End (Great Lakes Ruby Bash Edition)Michael Bleigh

The document discusses hacking the "mid-end" of web applications, which is defined as the layer between the front-end and back-end that focuses on abstraction. It provides examples of solving "mid-end" problems by building functionality without JavaScript first, then adding an interactive JavaScript layer. Specific techniques mentioned include helpers, partials, jQuery, and making the user interface faster, more accessible, intuitive and responsive.

The new React Maurice De Beijer [MVP]

This document summarizes React hooks and new features in a presentation. It introduces basic hooks like useState and useEffect, and more advanced hooks such as useReducer, useContext and custom hooks. It also covers new features like lazy loading components, concurrent React rendering, and the potential for ReactCache to improve data loading. The goal is to explain the future of React with its increased use of hooks and functional programming principles.

The productive developer guide to ReactMaurice De Beijer [MVP]

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

Isomorphic React applications allow code to run on both the client and server, improving performance and scalability. Server-side rendering builds HTML on the server so the page loads immediately before JavaScript loads. This improves the user experience but requires loading data asynchronously. Caching pre-rendered components and separating rendering can improve performance. Progressive rendering and Facebook's BigPipe technique can further optimize loading. Performance can also be improved through code optimizations like using direct React files and load balancing with multiple server instances.

Real World Problem Solving Using Application Performance Management 10CA Technologies

CA Application Performance Management 10 dramatically reduces the time needed to find and solve app problems. In this session you will learn about common problem-solving techniques used by experts to solve real-world app problems. You will get a chance to put these techniques to the test in a hands-on lab that mimics an interesting application performance problem. For more information, please visit http://cainc.to/Nv2VOe

ASP NetArana Technologies

Institute Management System-Synopsis.pdfprojects602

Computer institute management system project idea come in my mind when I went to “AITEC”. The record of every course, teachers, student are managed manually and there is no use of computer in the office. If anyone want to see student/ course/ teacher record than all the records will be fetched one by one. This process is very time consuming. So there was an extreme requirement of student management system project. Modules of the Project:  User Module  Designation  Center  Course Master  Student Master  Inquiry  Batch Allocation  Employee Master  Qualification  Attendance  Book/CD Master  Book/CD Issue  Search Book/CD  Reports

Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0Haytham Ghandour

This document provides an overview and agenda for a session on best practices and lessons learned from implementing EMC Documentum xCP 2.0. The agenda includes sections on best practices, debugging in Designer, and tips and tricks. Examples are provided for common xCP development tasks like prototyping user interfaces, handling captured documents, and enabling file uploads from mobile devices. Debugging techniques discussed include using the browser development tools and logs.

Introduction to MVC in Flex and HydraMVCcltru

The document discusses building rich internet applications (RIAs) using Flex and discusses how to structure applications using a Model-View-Controller (MVC) pattern to separate concerns and make the code modular and scalable without becoming too complex; it analyzes some common Flex frameworks like PureMVC and HydraMVC that can help implement MVC and discusses how to build simple components using an MVC approach in Flex.

React and Web Performance LarsRttig1

Building high performance web applicationsMaurice De Beijer [MVP]

Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]

Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]

Better React state management with ReduxMaurice De Beijer [MVP]

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

Mastering React Server Components and Server Actions in React 19Maurice De Beijer [MVP]

Design Based Devrajivmordani

Impact2014: Practical Performance TroubleshootingChris Bailey

Hacking the Mid-End (Great Lakes Ruby Bash Edition)Michael Bleigh

The new React Maurice De Beijer [MVP]

The productive developer guide to ReactMaurice De Beijer [MVP]

Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov

Real World Problem Solving Using Application Performance Management 10CA Technologies

ASP NetArana Technologies

Institute Management System-Synopsis.pdfprojects602

Best Practices & Lessons Learned from the field on EMC Documentum xCP 2.0Haytham Ghandour

Introduction to MVC in Flex and HydraMVCcltru

React and Web Performance LarsRttig1

More from Maurice De Beijer [MVP] (20)

Production-ready Next.js App with Cursor AIMaurice De Beijer [MVP]

Code Less, Create More: AI-Driven App Development for React Devs. Join us for a workshop designed for React developers eager to harness the power of AI to streamline their app development process. In "Code Less, Create More," you'll learn how to build applications using the Cursor IDE with the power of AI and minimal manual coding. Explore how Cursor, an AI-enhanced code editor, revolutionizes your coding experience by seamlessly integrating with your existing workflow. Uncover its advanced capabilities: predicting your next edits, offering real-time code suggestions, and comprehending your project's architecture. This allows you to channel your energy into creativity and innovation rather than grappling with syntax and repetitive tasks. We'll guide you through initializing a Next.js project, demonstrating how to utilize AI tools to efficiently craft dynamic, responsive applications. By the workshop's conclusion, you'll possess the skills to construct sophisticated software with reduced coding effort, empowering you to become a more productive and innovative developer. Whether you're a seasoned React developer or new to AI-assisted coding, this workshop will equip you with the knowledge and tools to elevate your development projects to the next level.

Building Robust Web Applications with Test-Driven Development and Playwright:...Maurice De Beijer [MVP]

Get ready to take your front-end development skills to the next level with our hands-on workshop. In this four-hour session, you will learn the ins and outs of test-driven development using Playwright, a powerful tool that will revolutionize your web development workflow. Are you tired of spending endless hours debugging issues in your web applications? Dive deep into writing tests before writing code, ensuring top-notch quality and functionality in your web applications. Say goodbye to manual testing and hello to automated tests that catch bugs early in the development process. Join us for an interactive and fun workshop where you'll gain the confidence to elevate your front-end development game and build web applications like a pro. Don't let common pain points like inconsistent UI behavior or regression issues slow you down - learn how to effectively use Playwright to avoid these pitfalls and streamline your development process. Don't miss this opportunity to unlock the full potential of test-driven development with Playwright – sign up now and get ready to uplevel your skills!

Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]

This document discusses various TypeScript techniques for building React server components applications. It covers topics like compiling code to catch errors, using the satisfies operator, custom type mappings, opaque types, readonly types, template literal types, and typing JSON files. The document provides examples for each technique and emphasizes how they can improve type safety, prevent errors, and optimize code. It also recommends applying these techniques and running type checks on pull requests.

A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]

Let's face the facts and admit it: Estimating how long it will take to build software is hard. Why is estimation so hard? Well there are some reasons for that. Many people tend to be optimistic about how long it will take to do a task. Not surprising when we learn the way memory works. It tends to skew our experiences from old projects. We often forget the many small setbacks encountered. Another reason is that many tasks are not included in the initial estimate. They only become visible over time. Does that mean that estimation is impossible and a waste of time? Not at all. Many software development activities are commercial activities. Starting something without even a rough estimate of what the costs and timeline will be is risky at best.

Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended. Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended. Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://azconf.dev/

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want. Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover. Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.

Building reliable web applications using CypressMaurice De Beijer [MVP]

Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.

React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]

The React team has rewritten the book on developing components several times. This time they have introduced Suspense. Amongst other thing this makes splitting your application into multiple bundles easier. But that is only the start as the real innovation comes when loading data. Gone are the side effect hooks with the typical loading, loaded and error states. Instead we can suspend components when loading data. Need to do multiple request? No problem you can suspend multiple components at the same time if you want. Need to trap errors? No problem just use a standard React error boundary. Come to this session to learn what React Suspense can do for you.

From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]

Reactive and functional programming, you have probably heard the term mentioned before. It’s supposed to be really cool and a good practice. But what is reactive programming exactly and how to get started with it in JavaScript? And why does Angular start using the reactive extensions for JavaScript (RxJS) instead of standard promises? In this presentation, Maurice is going to show you how to get started with RxJS, the JavaScript implementation of the ReactiveX library. You will learn why using RxJS is a great way of dealing with streams of events in an asynchronous and functional way.

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

This document discusses the history and evolution of React components from classes to hooks. It covers the problems with class components, such as complex this bindings and lifecycle methods. Hooks are introduced as a way to use state and side effects in function components by using functions like useState, useEffect and useContext. Custom hooks are also discussed as a way to extract component logic into reusable functions. The document emphasizes that hooks are optional and classes will continue to work, but hooks allow for more flexible and composable components.

From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

The document discusses the history and evolution of React components from classes to hooks. It introduces hooks as a new way to use state and other React features without writing classes. Hooks allow extracting component logic into reusable functions. This improves code reuse and makes components more readable and composable. The document outlines the basic hooks like useState, useEffect, and useContext as well as additional hooks and rules for using hooks.

I am hooked on ReactMaurice De Beijer [MVP]

The document discusses React hooks, a new addition to React that allows using state and other React features without writing classes. It provides an overview of hooks like useState, useEffect, and useContext that allow managing state, side effects, and context in function components. It also covers rules for using hooks, examples of custom hooks, and notes that classes will continue to work while hooks provide an alternative functional style.

Create flexible React applications using GraphQL apisMaurice De Beijer [MVP]

Using restful APIs can be hard on your React applications. Before you know it, you are doing lots of parallel queries to the server. Using GraphQL instead of REST might help a lot. Instead of downloading many complete resources each component declares its own needs. Then the GraphQL client library then combines these requirements. The result is a single optimized query for the server. In this session, Maurice de Beijer is going to show you how to get started with GraphQL in your React applications.

Create flexible react applications using GraphQL API'sMaurice De Beijer [MVP]

Docker for a .NET web developerMaurice De Beijer [MVP]

You have probably heard about Docker, these days it is a popular topic with cloud computing. But what does it take for a .NET developer to start with Docker? And where can you use it? Of course, you can deploy an application to the cloud using Docker. But you can also use Docker very effectively as a support tool when developing or testing. In this session, Maurice de Beijer will show you some of the many opportunities to use Docker.

From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]

Production-ready Next.js App with Cursor AIMaurice De Beijer [MVP]

Building Robust Web Applications with Test-Driven Development and Playwright:...Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]

A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]

Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

Build reliable Svelte applications using CypressMaurice De Beijer [MVP]

Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

Building reliable web applications using CypressMaurice De Beijer [MVP]

Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]

React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]

From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]

Why I am hooked on the future of ReactMaurice De Beijer [MVP]

I am hooked on ReactMaurice De Beijer [MVP]

Create flexible React applications using GraphQL apisMaurice De Beijer [MVP]

Create flexible react applications using GraphQL API'sMaurice De Beijer [MVP]

Docker for a .NET web developerMaurice De Beijer [MVP]

From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]

Recently uploaded (20)

Cyber Awareness overview for 2025 month of securityriccardosl1

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

How analogue intelligence complements AIPaul Rowe

Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results. News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Procurement Insights Cost To Value Guide.pptxJon Hansen

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Cyber Awareness overview for 2025 month of securityriccardosl1

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

How Can I use the AI Hype in my Business Context?Daniel Lehner

How analogue intelligence complements AIPaul Rowe

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Procurement Insights Cost To Value Guide.pptxJon Hansen

TrsLabs - Fintech Product & Business ConsultingTrs Labs

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Building high-performance web applications with Preact

1. Building high performance web applications with Preact Maurice de Beijer @mauricedb

3.  Maurice de Beijer  The Problem Solver  MicrosoftAzure MVP  Freelance developer/instructor  Twitter: @mauricedb, @NG_Tutorial and @React_Tutorial  Web: http://www.TheProblemSolver.nl  E-mail: [email protected] 3

6. Why performance?  40% of the website traffic is from mobile devices.  Bol.com in July 2016  Adding 100 ms of latency costs 1% of sales.  Amazon.com © ABL - The Problem Solver 6

9. “Performance is the art of avoiding work, and making any work you do as efficient as possible” -- Paul Lewis -- © ABL - The Problem Solver 9

17. A Preact component import { h, render, Component } from 'preact’; // <= h() replaces React.createElement() class Clock extends Component { // <= Always ES2015 classes constructor() { super(); this.state.now = new Date(); } componentDidMount() { this.timer = setInterval(() => this.setState({ now: new Date() }), 1000); } componentWillUnmount() { clearInterval(this.timer); } render({}, {now}) { // <= props and state passed return <span>{ now.toLocaleTimeString() }</span>; } } render(<Clock />, document.body); // <= render() instead of ReactDOM.render() © ABL - The Problem Solver 17

19. What is missing?  PropType validation.  Part of preact-compat  React.Children.  Part of preact-compat  Synthetic Events.  Preact only targets the Browser  Context is simplified. © ABL - The Problem Solver 19

21. ECMAScript imports import _ from 'lodash'; _.forEach(data, e => console.log(e)); © ABL - The Problem Solver 21 import { forEach } from 'lodash/forEach'; forEach(data, e => console.log(e));

24. PRPL  Push critical resources for the initial URL route.  Render initial route.  Pre-cache remaining routes.  Lazy-load and create remaining routes on demand. © ABL - The Problem Solver 24

37. Conclusion  Everyone loves faster web apps.  And they are good for business  Do as few request as possible to display the first page.  The fastest HTTP request is one not made  Use the PRPL pattern  Preact is small and fast.  The CLI gives you most of the PRPL pattern out of the box © ABL - The Problem Solver 37

Editor's Notes

#8: https://pixabay.com/nl/supersonische-vechter-vliegtuigen-63211/
#9: https://pixabay.com/nl/boord-blackboard-lettertype-1805318/
#11: https://www.pexels.com/photo/train-on-railroad-tracks-against-sky-258367/
#12: https://unsplash.com/photos/EXcDH29WLbg
#13: https://pixabay.com/nl/dolfijn-kind-kinderen-spelen-1548448/
#14: https://pixabay.com/nl/marokko-truck-vrachtwagen-hooi-842660/
#17: https://pixabay.com/nl/draaien-loper-lange-afstand-fitness-573762/
#27: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
#30: https://pixabay.com/en/technology-servers-server-1587673/
#31: https://pixabay.com/nl/tools-hamer-nagel-nagels-boor-15539/
#32: https://jonassebastianohlsson.com/criticalpathcssgenerator/
#34: https://pixabay.com/nl/systeem-netwerk-nieuws-persoonlijke-2546093/
#36: https://unsplash.com/search/splitting?photo=Xxd33FUBQeA
#37: https://pixabay.com/nl/sprinkhaan-viridissima-groene-193721

Building high-performance web applications with Preact

Recommended

More Related Content

What's hot (20)

Similar to Building high-performance web applications with Preact (20)

More from Maurice De Beijer [MVP] (20)

Recently uploaded (20)

Building high-performance web applications with Preact

Editor's Notes