Why React?

- [Instructor] While most UI samples with Spring Boot utilize Thymeleaf, I want to spend a bit of time and explain why React may be a better technology for building more robust visually appealing and dynamic front ends. We need to start a discussion with some of the pros and cons of using Thymeleaf as a UI presentation layer. With Thymeleaf, every page is rendered server side and powered by a Spring Boot controller. This server side rendering requires every change to come back to the server and reload the page. This can be network heavy as well as resource heavy when a page loads multiple models to build the view. While Thymeleaf offers a fantastic set of features including natural and renderable HTML templates, the feature set is limited and often requires building in AJAX type requests to load component fragments, increasing the complexity of page loads. Any business logic in a Spring Boot application running Thymeleaf as a templating engine will start to see leaking of presentation and business logic in multiple places. You will have complex if blocks in your template, and the controllers will quickly start to take on some business logic as well. I have built many applications this way, and while the segmentation is possible, it just isn't as clean. Most backend developers are building web services, not controllers for UI. With Thymeleaf, the use of web services is an afterthought and the controllers tend to bleed in both. This becomes almost a natural for backend-focused developers. Now, I know I'm listing issues with Thymeleaf, but I want to be clear that many of these problems can be solved with JavaScript libraries, and quite honestly, it's a fantastic technology, but I find the pain of making it work for really dynamic admin and internal applications is just not worth the effort, especially when you have technology like React at your fingertips. So how does React help us here? React, while very powerful, does have a steep learning curve that can be a challenge, especially for backend-focused developers. TypeScript does help with some of the learning curve in my opinion, but it's still very steep. In addition, there are build considerations. React builds generate static files through its own build process that most often run in a web server directly or in an application server like Node.js. This means to build the static files and serve them from a Spring Boot application, you have to do a two-step build process. Thymeleaf can become unruly with a template per page and then then add in forms and components. You end up including files in other files, removing the benefit of native HTML templates. You then have to ensure that you populate the models or the views won't render correctly. As the app grows, this makes it more and more difficult. Now with React, each component or page can be responsible for getting its own data. This makes both the underlying code structure cleaner as well as the UI code. However, you often need separate tools to render the component so you can actually develop it without having to reload the application. I encourage you to never underestimate the power of reusable components. So if you're in a scenario like I am where your customer facing application is written solely in React, you can use the same components or at least the component library while building your admin application. This means, at least at some organizations, that the specialists in React can build the components and the backend engineers building the admin apps can consume them. Of course, that's how everyone is full stacked. You can simply save time by using components in both application types. But I get the time savings plus the reduced learning curve. Now enough chatting about React, let's get into actually building the system.