Updates, 2017-07-16

fxfboy · Jul 16, 2017 · 31dc657 · 31dc657
1 parent 74c4625
commit 31dc657
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ You might also want to check out my categorized list of Redux-related addons, li
 - [Immutable Data](./immutable-data.md)
 - [React/Redux Testing](./react-redux-testing.md)
 - [React Native](./react-native.md)
+- [React Tips and Techniques](./react-techniques.md)
 
 #### Advanced Topics
 

diff --git a/basic-concepts.md b/basic-concepts.md
@@ -99,6 +99,10 @@
 - **Top Javascript Frameworks and Topics to Learn in 2017**  
   https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711  
   Eric Elliott gives some solid advice on what concepts, tools, and technologies are most valuable to learn today, as well as what related technologies are useful but optional.
+
+- **How to Learn React: A Five-Step Plan**  
+  https://www.lullabot.com/articles/how-to-learn-react  
+  A good set of suggested steps to follow and tools to use for learning React and Redux.
 
 
 #### General Suggestions for Learning

diff --git a/es6-features.md b/es6-features.md
@@ -208,6 +208,10 @@
   http://trycatchfail.com/blog/?tag=/promises  
   An excellent series of articles describing the basics of promises, and listing a variety of useful techniques for using promises to solve problems.
 
+- **Escape from Callback Mountain: the "Functional River" pattern**  
+  https://github.com/justsml/escape-from-callback-mountain/  
+  An opinionated suggested approach for writing promise callbacks to form a pipeline
+
 
 #### Techniques
 

diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md
@@ -102,6 +102,12 @@
   https://diessi.ca/blog/dont-blame-it-on-react-or-redux/  
   Some short but well-written thoughts that argue in favor of React and Redux's "do it yourself" / "don't prescribe how to solve everything" approach, and that blaming them for bad app design or boilerplate is wrong.
 
+- **What's So Great About Redux?**  
+  https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b  
+  https://storify.com/acemarke/redux-pros-cons-and-limitations  
+  https://twitter.com/modernserf/status/886426115874717697  
+  Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies.  Very worth reading.  The author originally wrote a tweetstorm, which I captured in the Storify link, and wrote the blog post to expand on those thoughts.  Finally, he followed up with a few more thoughts on abstract vs concrete examples in another shorter tweet thread.
+
 
 #### Comment Threads and Discussions
 

diff --git a/react-component-patterns.md b/react-component-patterns.md
@@ -192,6 +192,10 @@
   https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766  
   Some basic explanations of how a React app uses callback functions to communicate from children to parents
 
+- **How to use React's Provider pattern**  
+  https://www.robinwieruch.de/react-provider-pattern-context/  
+  Walks through the concepts and implementation of a "Provider" component that makes data available to deeply nested children, similar to the ones that come with Redux and MobX
+
 
 #### Component Categories
 
@@ -335,6 +339,14 @@
   https://www.robinwieruch.de/gentle-introduction-higher-order-components/  
   An excellent article demonstrating several ways to use HOCs to manage conditional rendering logic in a reusable way.
 
+- **Why Higher Order Components Make Sense**  
+  https://medium.com/javascript-inside/why-higher-order-components-make-sense-fe4145b4e305  
+  Several examples and some discussion of how HOCs can be used to compose and transform behavior.
+
+- **Simple explanation of Higher-Order Components**  
+  http://blog.jakoblind.no/simple-explanation-of-higher-order-components-hoc/  
+  A short, easy-to-read explanation of the basic concepts and examples of HOCs.
+
 
 #### Wrapping Non-React Code
 

diff --git a/react-implementation.md b/react-implementation.md
@@ -197,5 +197,6 @@
   https://www.youtube.com/watch?v=crM1iRVGpGQ  
   Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase.
 
-
-
+- **A look inside React Fiber**  
+  http://makersden.io/blog/look-inside-fiber/  
+  Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system.
diff --git a/react-native.md b/react-native.md
@@ -83,4 +83,8 @@
 
 - **6 Tips You Want to Know about React Native Performance**  
   https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance  
-  Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code.
+  Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code.
+
+- **How we restructured our app with React-Navigation**  
+  https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26  
+  Describes some of the history of the React-Navigation library, and shows some examples of how to use it with Redux and make a Higher-Order Component to work with it.
diff --git a/react-redux-testing.md b/react-redux-testing.md
@@ -214,6 +214,13 @@
 - **Testing Redux: Async Action Creators**  
   http://joeellis.la/testing-redux-actions/  
   Describes approaches for testing async action creators, particularly thunks that make AJAX calls.
+
+- **A guide to TDD a React/Redux TodoList App**  
+  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-1-b8a200bb7091  
+  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-2-8d4cb2dc154c  
+  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-3-f25c2289c54  
+  https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-4-edb62e113c9b  
+  A 4-part series that demonstrates a Test-Driven Development approach to writing a React/Redux app, with detailed explanations of what each test example does.
 
 
 

diff --git a/react-routing.md b/react-routing.md
@@ -35,6 +35,10 @@
   https://tylermcginnis.com/build-your-own-react-router-v4/  
   Tyler McGinnis, a React Training partner, walks through the process of building a miniature version of React Router v4 to help explain its concepts and implementation.
 
+- **A little bit of history**  
+  https://medium.com/@pshrmn/a-little-bit-of-history-f245306f48dd  
+  A deep look at the "history" library, which is the core of React Router and used by other routing libraries as well.
+
 
 #### Routing with Redux
 

diff --git a/react-styling.md b/react-styling.md
@@ -138,6 +138,10 @@
   https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d  
   A tutorial that walks through the main goals and concepts of Styled-Components, with examples
 
+- **Emotion: The Next Generation of CSS-in-JS**  
+  https://medium.com/@tkh44/emotion-ad1c45c6d28b  
+  The author of the Emotion library gives an overview of its principles, benchmarks, and uses.
+
 
 #### Techniques and Examples
 

diff --git a/react-techniques.md b/react-techniques.md
@@ -0,0 +1,10 @@
+### React Tips and Techniques
+
+
+- **Intro to Debugging React Applications**  
+  https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd  
+  An excellent introduction to the basic tools, concepts, and approaches for debugging React apps, including the browser's DevTools console, network tab, and source debugger, as well as the React DevTools.
+
+- **Get your React.js application translated with style**  
+  https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c  
+  A short opinionated intro to several aspects of handling translation in a React app, by the author of a React internationalization library.
diff --git a/redux-architecture.md b/redux-architecture.md
@@ -406,4 +406,8 @@
 
 - **Agile Front End Enterprise Architecture with React, Redux, and Vanilla JS**  
   https://medium.com/shiftgig-blog/agile-front-end-architectures-with-react-redux-and-vanilla-js-23f4e5626e01  
-  A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services.
+  A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services.
+
+- **NgRx: Patterns and Techniques**  
+  https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5  
+  Describes a variety of patterns and approaches for using the NgRx library (a clone of Redux built with RxJS and commonly used with Angular).  The labels and categories given for side effects approaches, like "content-based decider", "content enricher", etc, can be applied to existing Redux middlewares as well.  
diff --git a/redux-side-effects.md b/redux-side-effects.md
@@ -213,6 +213,10 @@
   https://medium.com/@jamiedixon/handling-errors-in-redux-saga-using-either-12671bc6cf90  
   Demonstrates an approach to handling error cases in Flux Standard Actions using the functional programming "Either" concept.
 
+- **Writing more testable code with Redux-Saga**  
+  https://medium.com/grey-frogs/writing-more-testable-code-with-redux-saga-c1561f995225  
+  Gives examples of some sagas for managing complex async query handling logic, and how to use the redux-saga-test-plan library to help test their behavior.
+
 
 #### Other Side Effect Approaches
 

diff --git a/redux-techniques.md b/redux-techniques.md
@@ -95,6 +95,10 @@
   http://www.guyzissman.com/posts/pipe-reducers/  
   Some short but helpful examples of how currying functions can be used to reuse reducer logic for similar use cases.
 
+- **Higher Order Reducers - It just sounds scary**  
+  https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705  
+  Explains how reducers can be composed like Lego bricks to create reusable and testable reducer logic.
+
 
 
 
@@ -243,6 +247,14 @@
   https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/  
   Discussion of the rationale and implementation of a library for connecting isolated portions of a Redux store state to a component while maintaining separation between presentation and state management.
 
+- **Making Toast from Scratch in React-Redux**  
+  https://spin.atomicobject.com/2017/07/12/react-redux-toast/  
+  A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation.
+
+- **Toast notification system in a React/Redux application**  
+  https://atech.blog/natterly/toast-notification-system-in-a-react-redux-application  
+  The Natterly team walks through how they built a Redux-connected toast notification implementation.
+
 
 #### Redux and Forms
 

diff --git a/redux-tutorials.md b/redux-tutorials.md
@@ -297,6 +297,20 @@
 - **Reading Redux: `createStore`**  
   https://engineering.universe.com/reading-redux-ca160163867e  
   A guided walkthrough of the code for Redux's `createStore` function
+
+- **Implement React Redux from Scratch**  
+  https://medium.com/@kj_huang/implementation-of-react-redux-part-1-411b971a9b5b  
+  https://medium.com/@kj_huang/implementation-of-react-redux-part-2-633441bd3306  
+  https://medium.com/@kj_huang/implementation-of-react-redux-part-3-dc54fce9746a  
+  A 3-part series that builds a slightly simplified version of the React-Redux v5 `connect` function to explain how it works.  A good follow-up from Dan's "connect.js explained" gist, which shows the basic conceptual behavior of `connect`, while this one traces through the internals.
+
+- **"I use React and Redux but never React-Redux, what am I missing out on?"**  
+  https://www.reddit.com/r/javascript/comments/6hperk/i_use_react_and_redux_but_never_reactredux_what/dj0fywb/  
+  A response I wrote to someone who asked why they should use the React-Redux `connect` function instead of subscribing to the store manually, where I described the benefits of using `connect` instead of writing manual subscription code.
+
+- **"Help getting @connect command to work with my Create-React-App project"**  
+  https://www.reddit.com/r/reactjs/comments/6l9roo/question_help_getting_connect_command_to_work/djskwqi/  
+  A comment I wrote describing why the Redux team discourages use of `connect` as a decorator.
 
 
 #### Paid Courses and Books

diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md
@@ -86,6 +86,10 @@
   https://iamakulov.com/notes/webpack-front-end-size-caching/  
   Covers a variety of ways to improve bundle sizes, including minification with Uglify, tree shaking imports, referencing external libraries, and more.
 
+- **Webpack 3 + React - Production Build Tips**  
+  https://medium.com/netscape/webpack-3-react-production-build-tips-d20507dba99a  
+  General advice for improving Webpack builds, including code splitting, minification, and several more.  Includes a complete Webpack config file at the end with the proper settings.
+
 
 #### Code Splitting and Chunking
 
@@ -372,3 +376,7 @@
 - **source-map-explorer**  
   https://github.com/danvk/source-map-explorer  
   Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps.  Help determine which file each byte in your minified code came from.
+
+- **bundle-buddy**  
+  https://github.com/samccone/bundle-buddy  
+  Bundle Buddy is a tool to help you find source code duplication across your javascript chunks/splits. This enables you to fine tune code splitting parameters to reduce bundle invalidation rates as well as improve repeat page load performance.
diff --git a/webpack-tutorials.md b/webpack-tutorials.md
@@ -57,6 +57,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
   http://sokra.github.io/slides/webpack2/#3  
   A slideshow from Webpack's original author.  Describes the basics of Webpack, how it can be used to build Progressive Web Apps, and improve speed and reliability through bundling.
 
+- **Webpack Academy**  
+  https://webpack.academy/  
+  Courses on Webpack concepts and usage, from the Webpack team.
+
 
 #### Basic Tutorials
 
@@ -246,6 +250,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
   https://dev.to/nitishdayal/stages-of-learning-webpack-pt-3---sourcemaps-loaders--plugins  
   Shows how to configure sourcemaps for debugging, use a loader to add TypeScript support, and add a plugin to generate an HTML index page for the bundle.
 
+- **Let's talk about our Webpack config files**  
+  https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9  
+  The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities.
+
 
 #### Webpack Configuration Utilities