Web Apps with Rust and Leptos
Duration
3 days
Description
Many programmers think of Rust as only a systems programming language, but it can be so much more. Rust is a great language for building front-end web applications with WebAssembly. There are several popular WebAssembly frameworks for Rust, this course covers the Leptos framework. Leptos is a component-based front-end web framework similar in concept to React, Angular, and Solid.js. In this course, you'll learn how to build front-end web applications with Rust and Leptos. You'll learn how to create components, pass data to components, and emit events from components. Also, you'll learn how to work with signals and render collections of data. By the end of this course, you'll be able to create your own front-end web applications with Rust and Leptos.
Objectives
- Understand the Principles of Building a Web Application
- Deepen your understanding of WebAssembly and how it works
- Explore the differences between pure JS frameworks and Rust-based WebAssembly frameworks
- Create a User Interface with Components
- Learn Best Practices and Principles of working with Components
- Run Server Functions from a Client-Side Code
- Publish and Host a Leptos Application
Prerequisites
- This course assumes prior experience with Rust, HTML, and CSS
Training Materials
All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.
Software Requirements
Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Rust and Visual Studio Code on their computers. Also, students will need permission to install Rust Crates and Visual Studio Extensions. If students are unable to configure a local development environment, a cloud-based environment can be provided.
Outline
- Introduction
- WebAssembly with Leptos
- What is Web Assembly?
- What is Leptos?
- How does Leptos compare to React, Angular, and Blazor?
- Getting Started
- Create a Leptos Project
- Run and Debug a Leptos Project with Visual Studio Code
- Components
- What are Components?
- Create a Component
- Pass Data to a Component via Props
- Dynamic Attributes
- Passing Children to Components
- Parent-Child Components
- Communicate from Child to Parent via a Write Signal
- Communicate from Child to Parent via a Callback
- Use a Closure instead of a Callback
- Use an Event Listener
- Context
- Component Render Logic
- Display Data in a Component
- Expressions
- Conditionally Display Data in a Component
- Render a Collection of Data
- Error Handling
- Component Event Handling
- Handle Events in a Component
- Event Modifiers
- Event Propagation
- Reactivity with Signals
- What are Signals?
- Four Signal Operations
- Dependency between Signals
- Effects
- Router
- What is Routing?
- What is a Router?
- Define Routes
- Nested Routes
- Parameters and Queries
- Links and Forms
- Working with the Server
- Calling Server Functions
- Extractors
- Responses
- Redirects
- Forms
- What is an HTML Form?
- Collecting Data from Users
- Form Validation
- Processing Form Submissions
- Action Forms
- Metadata
- Styling
- Server-Side Rendering
- What is Server-Side Rendering?
- Using Cargo-Leptos
- Life Cycle of Loading a Leptos Page
- Rendering Modes
- Hydration
- Testing
- Unit Testing Components
- E2E Testing
- Deployment
- Build a Leptos Application
- Publish a Leptos Application
- Hosting Considerations
- Dockerize a Full-Stack Leptos Application
- Optimizing WASM Size
- Conclusion