Module 9 Summary

This lesson summarizes module 9.0, where we learned about the benefits of a design system and incorporated the popular Ant Design into our own app.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the The newline Guide to Modernizing an Enterprise React App course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Modernizing an Enterprise React App, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Modernizing an Enterprise React App

  • [00:00 - 00:12] This lesson is a summary of what we've covered in Module 9. In this module, we learned why design systems are valuable for whole organizations, not just developers, and we met some popular options.

    [00:13 - 00:28] Design systems have really been catching on in recent years because they can take the place of both style guides for the marketing team and pattern libraries for the development teams. Not only that, but design systems help speed up design and development times.

    [00:29 - 00:41] They cut down on technical debt. They provide a more consistent user experience across products, and they generally lead to better products by allowing people to focus on solving end- user problems instead of implementation details.

    [00:42 - 01:01] Some of the best and brightest companies are making their design systems widely available – Google's Material UI, IBM's Carbon Design System, and Uber's base web to name just a few. So we learned how to incorporate the Ant Design System with our application and configure it to our color palette.

    [01:02 - 01:15] Ant Design is a very popular design system today that's highly customizable and highly extensible to fit many different needs. Because of its flexibility, getting started with it takes a little while and a good bit of initial configuration.

    [01:16 - 01:33] In this lesson, we've downloaded Ant, added its CSS libraries to Hardware Handler, and then made the extra effort to add Crayco so that we could use our own chosen color scheme instead of Ant's defaults. We learned the process to swap simple custom components out for Ant Design components.

    [01:34 - 01:55] Ant D offers a large library of custom React components to choose from and good documentation to help show the different options and customizations available to them. We swapped out simple elements like buttons and toasts and revealed how using Ant can save on JavaScript code, CSS code, and even the number of additional libraries needed for certain elements.

    [01:56 - 02:10] We learned how to read the Ant Docks and to use more complex Ant components in Hardware Handler. In our final lesson, we tackled Ant components for more complex elements like forms and multi-filter checkbox groups.

    [02:11 - 02:29] Although these elements weren't as straightforward to replace, through a combination of reading the Ant Docks, example code, and trial and error, we ultimately ended up with a good deal less code for the same functionality and a more consistent design. So, our next and final module is going to be our course wrap up.

    [02:30 - 02:35] Congratulations, you did it. You made it through the bonus module of this course.

    [02:36 - 02:47] This is a fantastic accomplishment and I thank you so much for sticking with me . In the final lesson in our next module, I'll recap everything that we've done over the many lessons of this course.

    [02:48 - 02:57] See you there. >> Okay.