Front end web development in Rust from Udemy

WebAssembly is a binary instruction format that most browsers support. It enables languages such as Rust, C, C++ Go, etc., to be compiled and run in a web browser.

The Rust programming language is the most frequently used language for developing WebAssembly applications, according to surveys.

And how could it not? It was voted as StackOverflow’s most loved and desired programming language, eight years in a row, thus everyone is looking for an excuse to run it even inside browsers, where Javascript is the usually the common approach.

You have already spent a good amount of time developing web applications and you have a very good understanding of Rust.

You are wondering whether you can develop your next UI in Rust and ship it to browser via WASM.

You are looking for a resource that has all you need in a single place.

Well, look no further. In this course i will show you how to create a complex web app in Rust that consumes JSON APIs.

We will use the Yew web framework along with wasm crates to build a UI with

- Authentication

- Several different routes and pages

- Forms for CRUD support

- State management, custom hooks and reducers

- Async requests via browser's fetch API

What's inside

Learning objectives

Developing frontend components with yew's virtual dom
Becoming familiar with the rust webassembly ecosystem

Interacting with browser and listening to events via wasm and websys
Communicating to web apis for crud via an authorization layer

Developing frontend components with yew's virtual dom
Becoming familiar with the rust webassembly ecosystem
Interacting with browser and listening to events via wasm and websys
Communicating to web apis for crud via an authorization layer

Syllabus

Introduction

Local setup

Gitlab repository

Learn handling form input and submitting forms

Yew Components

Component props

Event handling

Backend setup

Alert component and error handling

Work with yew routes, contexts and reducers

Router and custom routes

Navigator and redirects

Custom context and reducer

A better welcome page

Links and menu

Session handling

Session storage for auth tokens

Logout

CRUD

Rustacean list and add

Loader and custom hook

Edit rustacean

Delete rustacean

Button component

Crates list and add

Select component

Textarea component

Crates edit and delete

Trunk

Copying and serving files

Custom CSS or SASS

Building for release

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Assumes prior experience with web application development and a solid understanding of Rust, targeting developers looking to leverage Rust in the browser via WebAssembly

Utilizes the Yew web framework, which allows developers to build complex UIs with features like authentication, routing, forms, state management, and asynchronous requests

Covers practical aspects of web development, such as handling form input, event handling, session management, and CRUD operations, providing hands-on experience

Employs Trunk for copying and serving files, along with options for custom CSS or SASS, which are standard practices in modern web development workflows

Focuses on using Rust and WebAssembly (WASM) for front-end development, which may require learners to acquire new skills and knowledge outside of JavaScript

Requires setting up a local development environment and using tools like Gitlab, which may present a barrier for learners unfamiliar with these technologies

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Front end web development in Rust with these activities:

Review Rust Fundamentals

Show steps

Reinforce your understanding of Rust syntax, data structures, and ownership concepts to prepare for using Yew.

Browse courses on Rust

Show steps

Work through the Rust Book's introductory chapters.
Practice writing small Rust programs.
Review ownership, borrowing, and lifetimes.

Brush up on HTML, CSS, and JavaScript

Show steps

Review the basics of web development to better understand how Rust/WASM interacts with the browser.

Browse courses on HTML

Show steps

Review HTML structure and semantics.
Practice CSS styling and layout.
Understand basic JavaScript DOM manipulation.

Read 'The Rust Programming Language'

Show steps

Solidify your understanding of Rust's core concepts, which are essential for building web applications with Yew.

View The Rust Programming Language, 2nd Edition on Amazon

Show steps

Read the chapters relevant to web development.
Experiment with the code examples provided.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Follow Yew Framework Tutorials

Show steps

Gain practical experience with the Yew framework by working through official tutorials and examples.

Show steps

Complete the official Yew tutorial.
Explore the Yew examples repository.
Try building a simple Yew component.

Build a Simple CRUD Application

Show steps

Apply your knowledge by building a small CRUD application using Yew and WebAssembly.

Browse courses on CRUD

Show steps

Design the data model for your application.
Implement the CRUD operations using Yew components.
Test your application thoroughly.

Contribute to a Yew Project

Show steps

Deepen your understanding of Yew by contributing to an open-source project.

Show steps

Find a Yew project on GitHub.
Identify an issue to work on.
Submit a pull request with your changes.

Write a Blog Post on Yew

Show steps

Solidify your understanding and share your knowledge by writing a blog post about a specific aspect of Yew.

Show steps

Choose a topic related to Yew.
Write a clear and concise blog post.
Publish your blog post online.

Career center

Learners who complete Front end web development in Rust will develop knowledge and skills that may be useful to these careers:

WebAssembly Developer

A WebAssembly developer uses WebAssembly to build high-performance web applications. This course will help a WebAssembly developer who wants to use Rust for front end web user interfaces. The course shows how to work with Yew and wasm crates to build UIs, handle user interactions, and connect to APIs. The course covers many important features such as form handling, routing, and state management. A WebAssembly developer can use this to expand their capabilities and work on more ambitious and complex projects.

See salaries and explore the career path for WebAssembly Developer

Front-End Engineer

A front end engineer is primarily responsible for the user interface and user experience of a website or web application. This course directly addresses many of the core skills a front end engineer needs, such as building components with a virtual DOM, managing application state, handling forms, and doing routing, all within the unique context of Rust and WebAssembly. A front end engineer will find the focus on UI development using Yew framework and the specific techniques for handling web requests particularly useful. This shows how a skilled front end engineer can integrate Rust and WebAssembly into modern projects.

See salaries and explore the career path for Front-End Engineer

UI Engineer

A UI engineer focuses on building the user interface of web or mobile applications. The course provides the exact skills necessary for a UI engineer to build and maintain complex front end applications with Rust and WebAssembly. The focus on the Yew framework, form handling, component creation, and state management makes this course a natural fit for anyone pursuing this career. A UI engineer should take this course in order to take advantage of novel techniques in the field.

See salaries and explore the career path for UI Engineer

User Interface Developer

A user interface developer focuses on creating the interactive elements that users see and interact with on a website or web application. This course will help a user interface developer who is interested in the Yew framework. Specifically, those who are looking to use Rust and WebAssembly for front end development. The course explains how to build UI components with Yew's virtual DOM, create forms, handle user interactions, and manage application state, all crucial aspects of UI development, making this a good fit for those looking to build complex UIs.

See salaries and explore the career path for User Interface Developer

Web Application Developer

A web application developer builds and maintains software applications that run on the internet. This course provides a specific skill set for a web application developer looking to leverage Rust and WebAssembly. The course teaches how to build complex user interfaces with Yew, handle forms, implement routing, manage application state, and interact with APIs. All these are core tasks for a web application developer. The course's focus on using Rust to create front-end web applications makes it a good fit for those interested in modern web development.

See salaries and explore the career path for Web Application Developer

Web Developer

A web developer builds websites and web applications, often handling both front end and back end tasks. Although this course focuses on the front end, the skills learned will help a web developer who wants to understand front end development with Rust and WebAssembly. It covers the use of Yew for building user interfaces, form handling, state management, and API interaction. This course gives a web developer added versatility and a more specialized approach to front end development.

See salaries and explore the career path for Web Developer

Software Engineer

A software engineer designs, develops, and maintains software systems. This course can help a software engineer who wants to specialize in front end development with Rust and WebAssembly. The course helps build a foundation in the Rust and WebAssembly ecosystem and gives experience with key web development concepts such as handling forms, managing state, and integrating with APIs. This makes a software engineer more versatile by expanding their expertise to newer web technologies.

See salaries and explore the career path for Software Engineer

Rust Developer

A Rust developer specializes in using the Rust programming language to create software applications. Although this course focuses on front end development, it can still be helpful to a Rust developer who wants to apply their skills to web development through WebAssembly. The course explains how to create web applications using the Yew framework, manage state, handle forms, and interact with APIs. This course provides important practical knowledge about the Rust ecosystem and its web development capabilities.

See salaries and explore the career path for Rust Developer

Full-Stack Developer

A full stack developer is responsible for both the front end and back end of a web application. This course focuses on front end development, but it can be useful for a full stack developer who wants to explore front end using Rust and WebAssembly. The course covers building UIs with Yew, handling forms, managing state, and interacting with APIs, all important components of full stack web projects. The course provides a new approach to building user interfaces, and also adds to their overall repertoire of skills.

See salaries and explore the career path for Full-Stack Developer

Application Developer

An application developer is responsible for building and maintaining software applications. While the course focuses on front end web applications, an application developer can apply these skills to leverage Rust and WebAssembly in their projects. The course covers the use of the Rust language and the Yew framework for front end development, along with important skills such as state management and API interaction. An application developer will find the approach innovative and useful for adding to their technical skill set.

See salaries and explore the career path for Application Developer

Frontend Architect

A frontend architect is responsible for the planning and design of a web application's user interface. While this course focuses on implementing a frontend with Rust and WebAssembly, it is still useful to a frontend architect looking to understand the practical aspects of this cutting-edge technology. The course shows how to build complex UIs with Yew, manage application state, handle routing and web requests. A frontend architect can benefit from such a course to gain hands-on experience.

See salaries and explore the career path for Frontend Architect

Software Architect

A software architect is a high level software design role that decides how a software system is built and maintained. While the focus of this course is on the specific implementation of a user interface with Rust and WebAssembly, a software architect should understand the capabilities of all modern technologies. This course will help a software architect gain an understanding of how Rust can be leveraged on the frontend, which can inform their future projects. It will make them better equipped to make high-level design decisions.

See salaries and explore the career path for Software Architect

Technology Consultant

A technology consultant provides expert advice to organizations on how to use technology to meet their business goals. This course may be helpful to a technology consultant that wishes to deepen their understanding of the Rust ecosystem and WebAssembly. The course teaches important practical aspects of how to develop a front end using Rust. This can help a consultant provide informed opinions about leveraging these technologies, and also help in understanding the overall landscape of web development.

See salaries and explore the career path for Technology Consultant

Solutions Architect

A solutions architect designs and implements technology solutions for complex business problems. This course may be useful for a solutions architect who wants to understand how Rust and WebAssembly can be used for front end development. This course covers core web development techniques such as managing application state, routing, and integrating with APIs. This information can assist a solutions architect as they consider different technology options for various clients. It provides a concrete understanding of modern UI development.

See salaries and explore the career path for Solutions Architect

Technical Project Manager

A technical project manager oversees the planning, execution, and completion of technical projects, usually related to software development. This course may be useful for a technical project manager who needs to understand how web applications are built using current technology. The course demonstrates how to develop a Rust based front end by using the Yew framework. This will allow for better communication with their teams. This is knowledge that a project manager would benefit from.

See salaries and explore the career path for Technical Project Manager

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Front end web development in Rust.

The Rust Programming Language, 2nd Edition

Save

Is the official guide to learning Rust. It provides a comprehensive overview of the language, from basic syntax to advanced concepts. It is particularly useful for understanding Rust's ownership system, which is crucial for writing safe and efficient WebAssembly code. This book is commonly used as a textbook at academic institutions.

The Rust Programming Language, 2nd Edition

Paperback

The Rust Programming Language, 2nd Edition

Kindle Edition

Front end web development in Rust

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses