Webpack & React

A brief introduction to modern web development with Webpack, React, and Redux.

Transcript

1. Webpack && React
3. What is Webpack?
4. Why Another Module Loader? • It is simply not efficient to have all of your code for your entire app bundled up into one file if some portions of your app do not require all of the code. • Webpack has a feature that enables you to split your code up into “chunks” which can then be loaded on command. • This is generally referred to as “Code Splitting”. Keep in mind this isn’t just about splitting code into common chunks. Code can also be split into “on demand” chunk.
5. Webpack Benefits
6. Webpack Benefits • Hot Module Reloading • Increased developer productivity • For many tasks it can replace Gulp & Grunt • Cache Busting • Configuration Oriented
7. Webpack Drawbacks
8. Webpack Downsides • Learning Curve • In many cases, you will still need Gulp or Grunt to handle your build process.
10. What is React? React is a JavaScript library Facebook created for building high performance User Interfaces. React is currently used on very large scale applications at Apple, Facebook, Instagram, Twitter, Netflix, Paypal, Reddit, and Airbnb.
11. Why was React created? • React was created to build large scale applications that contain lots of data that changes over time. • React takes a component based approach to building User Interfaces. • Since each component is encapsulated, we can get more code reuse, better testing, and a clearer separation of concerns.
12. React Benefits
13. React Benefits • Performance gains as a result of Virtual DOM use & DOM handling • Allows developers to focus on JavaScript and building out components • Has a small compact API so there isn’t ton of React specific functions, html and jargon to learn. • Future friendly as it works with ES2015
14. React Benefits • Can be used on the server side of a web application • Debugging is easier as a result of React providing human readable and actionable messages in the console • Compile time syntax checking • You only need to look at one file to know how your React component will render • One way data flow allows for easier debugging
15. React Drawbacks
16. React Drawbacks • React is just the view layer of the MVC. In order to get additional functionality libraries or frameworks would need to be added. • Other popular frameworks are more fully featured and less decisions will be made up front. • When building with React there is a compilation step. • The initial payload for a React application is significant. With that said, React and friends still end up being smaller than most if not all of the large popular frameworks currently available.
18. What is Flux/Redux? • Flux is a front-end application architecture that is paired with React and uses unidirectional data flow. • When users interact with the view, actions are sent to the dispatcher, which notifies the store(s). The store(s) then update the views as needed. • The most popular implementation of the Flux pattern is Redux, which uses reducers (pure functions) to send state updates to the stores.
19. Flux Diagram
20. Flux/Redux Benefits
21. Flux/Redux Benefits • Lightweight. Minified file is 7kb. • It makes state management easier to reason about. • Only one state to manage for the whole application. • State is read-only. This helps enforce unidirectional data flow. • Changes to the state are made through pure functions (reducers), which take the current state and the action, and return a brand new state. • Testing reducers is very easy since they are pure functions.
22. Flux/Redux Drawbacks
23. Flux/Redux Drawbacks • Requires you to learn a new approach to managing application state. You must not directly manipulate it. • While traditional MVC frameworks often have built-in features like filtering functions, Redux/Flux enables these through state change.
24. Webpack && React Demo
25. Thanks!!!!