diff --git a/basic-concepts.md b/basic-concepts.md index 8f96f28..768395d 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -47,6 +47,13 @@ https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a An overview of what packages and package managers are, some related terms, and how these tools work. +- **2016 Javascript Rising Stars** + https://risingstars2016.js.org/ + A summary of which JS projects gained the most popularity in 2016, based on new Github stars. Serves as a useful overview of tool categories and popular tools + +- **A Brief History of Javascript** + https://auth0.com/blog/a-brief-history-of-javascript/ + Despite the name, it's actually an extended, in-depth history of Javascript's creation and evolution over time. #### Suggested Learning Approaches diff --git a/community-resources.md b/community-resources.md index f0a7513..bc729eb 100644 --- a/community-resources.md +++ b/community-resources.md @@ -47,6 +47,10 @@ https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/ A useful list of articles, libraries, and tools that cover the range of React development. +- **Awesome Create-React-App** + https://github.com/tuchk4/awesome-create-react-app + A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool. + #### People diff --git a/es6-features.md b/es6-features.md index 39c2466..37b22af 100644 --- a/es6-features.md +++ b/es6-features.md @@ -177,6 +177,10 @@ https://mockbrian.com/blog/2016/12/29/broken-promises/ Some useful tips for dealing with promises. +- **JS: Promises/A+, jQuery Deferreds, and errors** + http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/ + A comparison of the two most common Promise definitions, and how they differ in behavior + #### Techniques @@ -222,4 +226,9 @@ - **Understanding the State of Javascript Modules** http://georgemauer.net/2016/11/25/how-js-modules-work.html - A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why. \ No newline at end of file + A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why. + +- **Native ECMAScript Modules: Overview and New Features** + https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview + https://blog.hospodarets.com/native-ecmascript-modules-new-features + An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 0019db1..124d92c 100644 --- a/git-resources.md +++ b/git-resources.md @@ -48,6 +48,10 @@ - **Git for Humans** https://speakerdeck.com/alicebartlett/git-for-humans A slideshow introducing Git concepts without complex terminology + +- **Getting Git** + https://gettinggit.com/ + A paid video tutorial series that covers Git commands in detail, as well as everyday scenarios you might encounter while using Git #### Tips and Useful Info diff --git a/immutable-data.md b/immutable-data.md index 9b1c1df..dd5df28 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -42,6 +42,10 @@ - **Immutability is Not Enough** https://codewords.recurse.com/issues/six/immutability-is-not-enough A look at how using an immutable data approach doesn't magically prevent all bugs. + +- **Javascript Array Methods: Mutating vs Non-Mutating** + http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/ + An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each. diff --git a/mobx-tutorials.md b/mobx-tutorials.md index a900d66..008e72d 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -36,6 +36,10 @@ https://benmccormick.org/2017/01/09/mobx-first-impressions/ A quick introduction to MobX's basic concepts and how it works +- **How to Manage your JavaScript Application State with MobX** + https://www.sitepoint.com/manage-javascript-application-state-mobx/ + A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates + #### Testing diff --git a/react-ajax.md b/react-ajax.md index ab1c9fa..a29b25d 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -14,6 +14,14 @@ http://andrewhfarmer.com/ajax-libraries/ A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. +- **Loading data from APIs in React** + http://javascriptplayground.com/blog/2017/01/http-requests-reactjs/ + A 10-minute screencast that demonstrates how to create a component that fetches data from an API and renders it in a page. Covers how to use the React lifecycle to make requests, using the `fetch` API, and dealing with response successes and failures. + +- **3 Libraries and 3 Ways to handle AJAX in React Apps** + https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/ + Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries. + #### Request Implementation Examples diff --git a/react-component-patterns.md b/react-component-patterns.md index 0e07ef1..9a8f8fe 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -45,11 +45,11 @@ - **Ownership and Children in React** http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/ - Discusses the difference between "parent" and "owner" relationships, and what the "children" prop can look like. + Discusses the difference between "parent" and "owner" relationships, and what the `children` prop can look like. - **ReactCasts #3: React's Children API** https://www.youtube.com/watch?v=DJ53-G8EbxE - A screencast demonstrating how the "children" prop to compose components together + A screencast demonstrating how the `children` prop to compose components together - **React.Children and the React Top-Level API** http://callahan.io/blog/2016/09/16/react-dot-children-and-the-react-top-level-api/ @@ -59,6 +59,10 @@ http://jaketrent.com/post/send-props-to-children-react/ Examples of how to pass new props to child components using `React.Children` +- **A deep dive into children in React** + http://mxstbr.blog/2017/02/react-children-deepdive/ + An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified. Includes several examples and demos. + #### React Component Lifecycle @@ -124,6 +128,7 @@ - **Higher Order With Context** https://dev.to/kayis/higher-order-with-context + https://dev.to/kayis/higher-order-components-and-context-example Examples of using Higher Order Components to pass data to nested components using `context` @@ -165,6 +170,10 @@ http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/ Explanation and examples of "container" and "presentational" components and their responsibilities. Uses Redux for the examples, but the principles apply to "just" React as well. +- **Refactoring React - Extracting Layout Components** + http://erikaybar.name/refactoring-react-extracting-layout-components/ + Demonstrates creating reusable components that manage some aspects of styling and layout, such as a button with multiple sizes and colors. + #### Higher-Order Components @@ -325,8 +334,11 @@ - **"What is the ideal way to pass data to a callback prop?** https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38 Discussion and examples of various ways to pass data to callbacks between children and parents - - **On Privacy with React Context** https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509 - Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues. \ No newline at end of file + Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues. + +- **Internationalizing React Apps** + https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/ + An extended investigation of server and client aspects needed for internationalization. \ No newline at end of file diff --git a/react-forms.md b/react-forms.md index 95b6f7e..2121197 100644 --- a/react-forms.md +++ b/react-forms.md @@ -89,6 +89,10 @@ https://www.viget.com/articles/building-a-multi-step-registration-form-with-react A form example that shows how to track the current form step, render the right form component, and store all the necessary form data +- **Making dynamic form inputs with React** + https://goshakkk.name/array-form-inputs/ + Covers how to build a form that can add and remove entries dynamically, with examples. + #### Form Validation diff --git a/react-implementation.md b/react-implementation.md index 663c069..c5c1c22 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -113,6 +113,10 @@ - **The Inner Workings of Virtual DOM** https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf An in-depth article that digs into how a Virtual DOM implementation works, using Preact as an example. Includes some detailed flowcharts of their behavior. + +- **React Internals** + https://zackargyle.github.io/react-internals-slides/#/ + An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations. #### React Fiber diff --git a/react-performance.md b/react-performance.md index 7ff3588..8be30e0 100644 --- a/react-performance.md +++ b/react-performance.md @@ -111,6 +111,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://60devs.com/pure-component-in-react.html A look into what React.PureComponent is, how it works, and how it can be used to improve performance +- **React at 60FPS** + https://hackernoon.com/react-at-60fps-4e36b8189a4c + A look at several useful techniques for benchmarking and improving React application performance + #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index 5f6a55f..2da4f69 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -162,6 +162,10 @@ https://reflect.io/blog/js-testing-mocha-chai-enzyme/ A number of useful tips for improving component tests, including use of shallow rendering, avoiding errors while testing, and making test code consistent +- **The Right Way to Test React Components** + https://medium.com/@suchipi/the-right-way-to-test-react-components-548a4736ab22 + Excellent advice on how to determine a component's "contract", what aspects of that are worth testing, and how to approach testing that contract. + #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index c664635..02fd648 100644 --- a/react-routing.md +++ b/react-routing.md @@ -43,4 +43,12 @@ - **JWT Authentication with React + Redux** http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/ - Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users. \ No newline at end of file + Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users. + +- **Role-based authorization using React-Router** + http://frontendinsights.com/role-based-authorization-using-react-router/ + A look at some ways to control component routes based on user roles + +- **Role based authorization in React** + https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4 + Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering \ No newline at end of file diff --git a/react-server-rendering.md b/react-server-rendering.md index 31723f3..733343a 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -24,3 +24,7 @@ - **Universal React Rendering: How We Rebuilt SitePoint** https://www.sitepoint.com/universal-react-rendering-sitepoint/ The SitePoint team explains how they added server-rendered React content into their existing Wordpress application + +- **React on the Server for Beginners: Build a Universal React and Node App** + https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app + Details building a React app that renders on both the client and the server \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index c15aebd..d7ef102 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -68,4 +68,8 @@ - **Using a function in `setState` instead of an object** https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1 - An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state. Useful for ensuring proper updates. \ No newline at end of file + An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state. Useful for ensuring proper updates. + +- **"Best kept React secret: declare state changes separately from component classes"** + https://twitter.com/dan_abramov/status/824308413559668744 + Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState` \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index ccc6a70..7cc0c45 100644 --- a/react-styling.md +++ b/react-styling.md @@ -83,3 +83,11 @@ - **Orthogonality and CSS in JS** https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). + +- **Styled-Components: Enforcing Best Practices** + https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/ + A look at some best practices for writing styles for reusable components, and how the styled-components library can help enforce those principles. + +- **CSS-in-JS comparisons** + https://github.com/MicheleBertoli/css-in-js + A repository that contains implementation comparisons between many different CSS-in-JS libraries \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 71df5e8..2177f55 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -108,6 +108,9 @@ https://www.kirupa.com/react/events_in_react.htm An introduction to React's event handling system, including useful tips and some gotchas +- **React 101: Condensed** + http://erikaybar.name/react-101-medium-and-slides/ + Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about. #### React Concept Overviews @@ -173,6 +176,10 @@ http://btholt.github.io/complete-intro-to-react/ An online workshop intended to get you up to speed on modern development and give you an idea what it's like to develop an app in the React ecosystem. +- **React+Redux Workshop** + https://github.com/btholt/react-redux-workshop + An online workshop that gets you up to speed on using React and Redux + - **React Tutorial: Build a Yelp Clone** https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/ A full-length walkthrough of how to build an app that uses routing, Google Maps integration, and more. @@ -208,10 +215,6 @@ http://academy.plot.ly/#react Max Stoiber's full-size tutorial on building an app using React. Includes an intro to React, project setup, using external libraries, data management with Redux, use of Immutable.js, and testing with Jest. -- **React on the Server for Beginners: Build a Universal React App** - https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app - Details building a React app that renders on both the client and the server - - **React 101** https://blog.tighten.co/react-101-building-a-gif-search-engine https://blog.tighten.co/react-101-using-redux @@ -299,3 +302,6 @@ Also see the course sites listed in the [Community Resources](community-resource http://www.robinwieruch.de/the-road-to-learn-react/ A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more. The author's blog posts are excellent, and this book is definitely recommended. +- **Learn Pure React** + https://daveceddia.com/learn-pure-react/ + A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React. \ No newline at end of file diff --git a/redux-architecture.md b/redux-architecture.md index 11a6113..8ebe8de 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -87,6 +87,10 @@ https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133 Some useful mental comparisons for understanding Redux when coming from an MVC architecture background +- **React + Redux: Architecture Overview** + https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e + A look at the common pieces that make up a Redux application, with some very useful diagrams to illustrate what they are and how they fit together. + #### Redux Best Practices @@ -151,17 +155,18 @@ https://blog.spacelab.team/4-things-for-efficient-redux-17e87b4cd6cb Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions. -- **Seven Months Into Redux: Two Things My Team Learned Along the Way** - https://medium.com/@benipsen/seven-months-into-redux-two-things-my-team-learned-along-the-way-5d979c25ea61 - A couple useful suggestions on use of RxJS for managing action updates and handling derived data in selectors. - - **A Year of Development with Redux** https://blog.shakacode.com/a-year-of-development-with-redux-part-i-a5791e124a7d - Some quick tips for working with Redux and structuring data + https://blog.shakacode.com/a-year-of-development-with-redux-part-ii-3035ff0b1781 + Some quick tips for working with Redux, structuring data, and encapsulation of components - **Avoiding False Cause** http://sebinsua.com/avoiding-false-cause/ Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates) + +- **Isn't our code just the BEST** + https://medium.com/bumpers/isnt-our-code-just-the-best-f028a78f33a9 + A quirkily-written look at how a dev team rewrote their project using React and Redux, including examples of project structure, component usage, and data normalization #### Encapsulation and Reusability diff --git a/redux-middleware.md b/redux-middleware.md index aeb9556..449a3d3 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -38,6 +38,10 @@ https://www.youtube.com/watch?v=T-qtHI1qHIg A screencast that describes how middleware fit into Redux, their uses, and how to implement a custom middleware +- **Redux Middleware** + https://vmayakumar.wordpress.com/2016/12/27/redux-middleware/ + Some analogies for understanding middleware in terms of the OOP "Decorator Pattern" vs Functional Programming composition + #### Middleware Techniques diff --git a/redux-side-effects.md b/redux-side-effects.md index 4df0cbd..6d8c686 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -35,6 +35,10 @@ https://daveceddia.com/what-is-a-thunk/ A quick explanation for what the word "thunk" means in general, and for Redux specifically.. +- **Understanding how redux-thunk works** + https://medium.com/@gethylgeorge/understanding-how-redux-thunk-works-72de3bdebc50 + An attempt to explain both redux-thunk and Redux's applyMiddleware enhancer, by rewriting the original implementations to add logging and rework names for ease of understanding. + #### Side Effect Approach Comparisons @@ -130,6 +134,10 @@ https://devblog.xero.com/the-three-rs-refactoring-react-and-redux-for-robust-async-js-252648a8632f More information from Xero on how they have used sagas for async workflows, including splitting code up into smaller sagas that can be composed. +- **4 Quick Tips for Managing Many Sagas in a React-Redux-Saga App** + https://decembersoft.com/posts/4-tips-for-managing-many-sagas-in-a-react-redux-saga-app/ + Some useful suggestions for structuring and organizing sagas + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index d5fe94c..84ec8e7 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -53,6 +53,10 @@ http://cmichel.io/modifying-a-leaf-of-the-redux-state-tree/ Some useful observations on how to properly do deep immutable updates. +- **"How to dynamically load reducers for code splitting in a Redux application?"** + http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application + Dan Abramov gives a basic exapmle of how to rebuild and replace the root reducer function at runtime + #### Selectors and Normalization @@ -133,6 +137,10 @@ https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them. +- **Open Sourcing a Redux Component** + https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62 + Details how the author developed a complex React+Redux grid component, including HTML structure, proper use of Immutable.js for good perf, and lib exports. + #### Redux and Forms @@ -155,6 +163,10 @@ - **Writing maintainable forms with Redux** https://medium.com/@SBoudrias/writing-maintainable-forms-with-redux-2ef30b5d0e35 Some basic examples for handling validation, loading initial data, and change tracking in forms. + +- **Using forms in React-Redux: Tips and Tricks** + https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6 + Some helpful suggestions for using Redux-Form to manage forms in a Redux app #### Other diff --git a/redux-tutorials.md b/redux-tutorials.md index 63bad57..e0c7367 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -92,7 +92,20 @@ - **React, Redux, and React-Redux** http://jilles.me/react-redux-and-react-redux/ Comparison and examples of implementing a filterable list with just React, with "manual" React code reading from Redux, and using the official React-Redux library + +- **Redux's Mysterious Connect Function** + https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4 + An overview of how to use React-Redux's `connect` function to glue together a Redux store and React components + +- **Why You Should Use Redux to Manage Immutability** + https://www.toptal.com/javascript/immutability-in-javascript-using-redux + An introduction to several aspects of Redux, including immutability concepts, use of immutable data libraries, using middleware for side effects, and connecting React to Redux +- **An Introduction to Redux / Redux: Would you like to know more?** + https://c3-tko.github.io/introduction-to-redux/#/ + https://c3-tko.github.io/redux-would-you-like-to-know-more/#/ + A pair of HTML slideshows that discuss some of the problems of storing application state, how Redux can help solve those problems, and several tradeoffs and benefits of using Redux. + #### Project-Based Tutorials diff --git a/redux-without-react.md b/redux-without-react.md index 0490e0a..20132a6 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -31,4 +31,8 @@ - **Building a Redux Application with Angular 2** https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1 https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2 - A tutorial that teaches how to use Redux and Angular 2 together, by building a small finance app \ No newline at end of file + A tutorial that teaches how to use Redux and Angular 2 together, by building a small finance app + +- **Build a Better Angular 2 Application with Redux and ngrx** + http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ + An extended article that demonstrates how to build a Redux-based Angular 2 app using the ngrx store implementation. Some interesting discussion in the comments. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 16c294b..66fc5de 100644 --- a/static-typing.md +++ b/static-typing.md @@ -98,7 +98,7 @@ A walk through setting up Flow, some possible problems you might encounter, and ways to customize and improve the typing process. -#### Redux and Static Types +#### React, Redux, and Static Types - **Checking React and Redux Code with Flow** http://djcordhose.github.io/react-intro-live-coding/2016_jsunconf.html#/ @@ -123,6 +123,10 @@ - **Tagged Unions, React, and Redux** https://hackernoon.com/tagged-unions-react-and-redux-55e262e4d0ea Examples of using Flow union types to define component props + +- **Typing React Components** + https://datarockets.com/blog/typing-react-components + Examples of migrating from React PropTypes to Flow, as well as typing Redux usage #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 79bc976..45c7330 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -57,7 +57,19 @@ - **A React + Webpack Optimization Case** https://medium.com/@kudochien/a-react-webpack-optimization-case-27da392fb3ec Several useful examples of how to profile and optimize a Webpack-based project, including checking bundle contents, specific imports from libraries, ignoring Moment locales, and more. + +- **Optimizing Wepback build times and improving caching with DLL bundles** + https://robertknight.github.io/posts/webpack-dll-plugins/ + Explains the benefits of using DllPlugin for generating library bundles, shows how to configure it, and compares with other chunking methods. +- **Tree-shaking ES6 Modules in Webpack 2** + https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b + A look at the concept of tree-shaking to reduce output size, how it relates to module formats, and how to configure Webpack to properly allow for tree-shaking + +- **Webpack tree-shaking** + https://medium.com/@johnstew/webpack-tree-shaking-20914b7a9ca5 + An explanation of what tree-shaking is, how to configure Webpack to apply it, and how it works. + #### Code Splitting and Chunking @@ -97,6 +109,10 @@ http://darrennewton.com/2016/12/21/components-a-la-carte/ Describes a technique for dynamically loading only certain features that a user should see +- **Dynamic Imports with Webpack 2** + https://dev.to/kayis/dynamic-imports-with-webpack-2 + A quick example of how to use dynamic imports to load pages or components at runtime + #### Bundle Sizes and Visualization @@ -128,6 +144,9 @@ https://www.sivadass.in/using-source-map-explorer-with-webpack/ Examples of using the source-map-explorer tool to visualize the contents of a bundle +- **Analyzing and optimizing your Webpack bundle** + https://medium.com/@ahmedelgabri/analyzing-optimizing-your-webpack-bundle-8590818af4df + Some quick suggestions for using CLI flags to show sizes of bundled chunks, and using webpack-bundle-analyzer and IgnorePlugin to exclude unneeded files. #### Hot Module Replacement @@ -230,6 +249,14 @@ http://tomasalabes.me/blog/_site/web-development/2017/01/03/Useful-Webpack-Define-Plugin-Usages.html Several useful tips and use cases for using the Webpack DefinePlugin, including logging, feature flags, and handling multiple environments +- **Artsy Webpack Tour** + https://github.com/TheLarkInn/artsy-webpack-tour + Sean Larkin of the Webpack core team gives a visually annotated tour of the Webpack 2 source code + +- **Squeezing Webpack into backend frameworks** + https://infinum.co/the-capsized-eight/squeezing-webpack-into-backend-frameworks + Covers how to use Webpack to replace the Rails asset pipeline + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 81cb3ab..c5dae65 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -48,6 +48,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Module Bundling and Webpack in Simple Terms** http://arianv.com/post/Module-Bundling-and-Webpack-in-Simple-Terms/ An informative high level overview that explains what Webpack does and how it works. + +- **Webpack: It's Not Magic** + https://naomiajacobs.github.io/WebpackTalk/ + An excellent HTML slideshow that explains how Webpack allows you to use code that is nice to write, and transforms it into code that the browser fully understands. Also looks at how Webpack works conceptually. #### Basic Tutorials @@ -137,6 +141,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Migration to Webpack@2** https://blog.shakacode.com/migration-to-webpack-2-c9803871b931 Some tips for updating a Webpack 1 config to work with Webpack 2 + +- **A Beginner's Guide to Webpack 2 and Module Bundling** + https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/ + An extended tutorial that covers many Webpack concepts, including basic setup, loaders, plugin, code splitting, and the Webpack Dev Server #### Configuration Terms and Concepts @@ -145,7 +153,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9 A great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the "entry" option, the "output" option / "path" vs "publicPath", loaders and configuration, Babel, plugins, and path resolving. - - **Webpack Series Part 1: Some Configs Explained** http://tomasalabes.me/blog/_site/web-development/2016/04/30/Webpack-Series-Part-1.html Describes a number of Webpack config options, including "noParse", "libraryTarget", and "externals" @@ -178,6 +185,18 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac http://tomasalabes.me/blog/_site/web-development/2016/12/10/Webpack-and-the-public-path.html Looks at how to configure URLs for resources that are not part of the final output bundle, such as images on CDNs +- **Source Maps with Webpack in Chrome** + http://erikaybar.name/webpack-source-maps-in-chrome/ + Tips for proper configuration of sourcemaps, including some gotchas and differences between `devtool` config values. + +- **Conditional Build with Webpack** + https://medium.com/tech-angels-publications/conditional-build-with-webpack-72c36b51abbc + Suggestions for creating shared configs that can be used across multiple apps, with certain values replaced at build time. + +- **The Fine Art of the Webpack 2 Config** + https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172 + Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments. + #### Webpack Configuration Utilities