In this video, Emmanuel Henri goes through the various elements that are part of a solid and standard React enterprise architecture. He introduces several elements that are shown or explained in subsequent videos.
- [Instructor] So, now we have a simple project set up but what is it made of and what are the elements of an enterprise architecture if you were to build it on your own? Let's explore this a bit. So, the first thing you have in that particular project is containers, so if you're not familiar with Docker, containers are basically a way to pre-package everything in a virtual package called a container and when you distribute this to other people they can't say that oh, I don't have certain things to install it, I'm missing dependencies and things like that, it's a pre-package almost like a zip file containing all the aspects of your project.
The second thing that we have is continuous integration and deployment. When you work on your projects and you deploy it to GitHub, Travis CI basically runs and builds your project and then tests it to make sure that there's no issues with it so what that allow us is to really prevent any issues before you deploy it to production. The next one is NPM modules. So, whenever you do NPM install or yarn install, basically what you're doing is installing packages from NPM so there's a way for you to create specific modules inside of your project that you can publish to NPM and then leverage that inside of your application the same way you are leveraging any other libraries in your application.
You also have private ones that you can publish to NPM just in case you want to have private repos as opposed to public ones. Next you have state management, so in most cases we're going to use Redux and in this project we're using Redux but state management in general is a way to manage your states and make sure that there's no side effects when you are changing from one state to the other. If you're not familiar with state management there's a nice introduction to it in one of my course called React Ecosystems but in this particular project we're using Redux.
Next is SSR so if you're not familiar with SSR basically it is rendering your components in the server and then publishing it to your client, so that's really good when you want to do SEO or if you want to do performance enhancements and we got that with Electrode as a default and there's also some nice modules that you can add to Electrode to do caching and optimization for SSR, so we'll go a little bit over that in future videos.
The next one is possessive web app, so if you're not familiar with that term it's basically allowing to do native app-like functions in a web environment, so for example, we can do push notifications, we can do offline for the application and there's a whole bunch of other features that you can use with PWA and when you do progressive web apps get familiar also with the term service workers because whenever you're creating a function for your PWA application you have to do this through service workers.
Last but not least one thing that is crucial and needed in every enterprise-like application or project is testing and linting. This will allow you to prevent a lot of the bugs even before they get to production. This will allow you to have better syntax because you're going to be warned when you're typing or when you're coding something not the right way or within industry standards and the players in this field are numerous but here's a few that we are using and kind of the standards in the industry, so you can use Jest with React and in one of my courses I'm actually going through how to use Jest and how to test with Jest.
There's Mocha, there's Karma and for linting there's ESLint that is the standard in the industry and most people use that, so in all my projects that's the one that I'm using. So, now that we have a good understanding of the pieces of an enterprise application, you could easily build you own picking up pieces from the parts that I've talked about in this video. Alright, let's move on.
- Working with the Electrode and Electrify libraries
- React project organization
- State management with redux-saga
- Testing with Jest, Mocha, and Chai
- Continuous integration with Travis CI
- SSR and caching optimization