Updates, 2017-10-01

es6-features.md

@@ -154,6 +154,10 @@
   http://dealwithjs.io/es6-features-10-use-cases-for-proxy/  
   Lists a variety of ways that ES6 proxies can be used, with links to examples
 
+- **Stop JavaScripting Like It's 1999**  
+  https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999  
+  A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment.
+
 
 #### Generators
 
@@ -225,6 +229,10 @@
   https://github.com/justsml/escape-from-callback-mountain/  
   An opinionated suggested approach for writing promise callbacks to form a pipeline
 
+- **ES6 Promises: Patterns and Anti-Patterns**  
+  https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918  
+  Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback.
+
 
 #### Techniques
 

framework-comparisons.md

@@ -1,5 +1,15 @@
 ### Javascript Framework Comparisons
 
+#### React, Angular, Ember, and Vue
+
+- **Angular vs React vs Vue: A 2017 Comparison**
+  https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176  
+  The best framework comparison article I've seen. Covers multiple important considerations when choosing a framework, clearly describes the pros, cons, approaches, and tradeoffs of each library, and gives some suggestions for why you might want to choose one framework over the other.  Also links to several additional comparison articles at the end.
+
+- **Comparing Frontend Approaches**  
+  https://medium.com/@peterxjang/comparing-frontend-frameworks-part-1-introduction-6cf3d49e42cf  
+  A series that builds the same notes app with jQuery, Vue, React, and Elm, and compares the pros and cons of the approaches.
+
 
 #### React and Flux vs Backbone
 

functional-programming.md

@@ -158,3 +158,7 @@
 - **What's Functional Programming All About?**  
   http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html  
   A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved.
+
+- **Higher Order Functions and Redux Thunk**  
+  https://medium.com/@joedski/higher-order-functions-and-redux-thunk-1e5983ae6b03  
+  An exploration of ways to wrap behavior around thunks, including composing functions together.

git-resources.md

@@ -52,6 +52,10 @@
 - **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
+
+- **Learn Enough Git to Be Dangerous**  
+  https://www.learnenough.com/git-tutorial  
+  A tutorial that teaches practical use of Git basics, Github, and Git workflows.
 
 #### Tips and Useful Info
 

javascript-resources.md

@@ -168,6 +168,10 @@ While this list is primarily focused on learning React and Redux, and generally
 - **Which Array Function When?**  
   https://dev.to/andrew565/which-array-function-when  
   A great explanation of the differences between the various methods that can loop over arrays (`map`, `filter`, `reduce`, and `forEach`), and when you should use each one.
+
+- **What is This in Javascript?**  
+  https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/  
+  An easy-to-read explanation of the different ways `this` can be defined in a function.
 
 
 #### Paid Courses and Books

mobx-tutorials.md

@@ -74,6 +74,14 @@
   https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc  
   Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more.
 
+- **Mobx React - Best Practices**  
+  https://medium.com/@daniel.bischoff/mobx-react-best-practices-17e01cec4140  
+  Several tips for good use of MobX with React, including separating API calls from stores, injecting stores into components, using @computed, and more.
+
+- **The Curious Case of Mobx State Tree**  
+  https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f  
+  Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities.
+
 
 #### MobX and Redux Comparisons
 

project-structure.md

@@ -87,7 +87,12 @@
 
 - **Decoupling Hierarchies for Maintainable Code**  
   https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047  
+  Some very interesting thoughts on how component structure, data flow, and folder structure can interact with each other.
 
 - **Writing Scalable React Apps with the Component Folder Pattern**  
   https://medium.com/styled-components/component-folder-pattern-ee42df37ec68  
   Describes a specific variation on "feature folders" that puts all files for a given component in a separate folder, as well as an approach for providing configurable component rendering with default behavior as a fallback.
+
+- **Fractal: A React app structure for infinite scale**  
+  https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af  
+

pros-cons-discussion.md

@@ -55,6 +55,10 @@
   http://engineering.teacherspayteachers.com/2017/08/02/why-we-chose-react-to-help-serve-millions-of-educators.html  
   The Teachers Pay Teachers team describes why they chose React to rebuild their UI, including the small API size, size of the community, battle-tested capabilities, and more.
 
+- **Why Redux is the Future of Angular 2 and React**  
+  https://rangle.io/resources/why-redux-future-of-angular-react/  
+  A webinar video from Rangle.io, discussing the benefits of functional components and Redux for state management, and how Redux can be used with both React and Angular.
+
 
 #### Redux/Flux Comparisons
 
@@ -253,6 +257,12 @@ similar structures in ClojureScript.
   https://twitter.com/_jayphelps/status/846226930416345088  
   Jay Phelps, author of redux-observable, starts a long and involved Twitter thread about when it's appropriate to use Redux - use cases, app sizes, and reasons.  Lots of interesting opinions.
 
+- **"Redux app size, boilerplate, and abstraction"**  
+  https://news.ycombinator.com/item?id=15341562  
+  https://news.ycombinator.com/item?id=15344600  
+  https://news.ycombinator.com/item?id=15344447
+  A long subthread of the "React 16" announcement post that discusses several aspects of Redux "boilerplate" and abstraction.  I answered a lot of questions about how Redux can and should be used, and there were actually some excellent comments about how Redux usage pays off for long-term app maintainability.
+
 
 #### React's PATENTS License
 

react-architecture.md

@@ -248,6 +248,10 @@
   https://www.robinwieruch.de/learn-react-before-using-redux/  
   Robin Wieruch covers a list of key React concepts you should be familiar with before trying to tackle learning Redux or other major state management libraries.
 
+- **7 architectural attributes of a reliable React component**  
+  https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/  
+  An excellent list of principles to consider when designing React components, including single responsibility, encapsulation, reusability, testability, and meaning.
+
 
 
 #### React Architecture

react-implementation.md

@@ -100,6 +100,10 @@
   http://www.mattgreer.org/articles/react-internals-part-four-setState/  
   A 5-part series that will recreate React from the ground up, illustrating how it works along the way.
 
+- **Making a custom React renderer**  
+  https://github.com/nitin42/Making-a-custom-React-renderer  
+  A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document
+
 
 #### Implementation and Internals
 
@@ -181,6 +185,14 @@
 
 #### React Fiber
 
+- **React v16.0**  
+  https://reactjs.org/blog/2017/09/26/react-v16.0.html  
+  The React team officially announces the release of React 16 and describes the new features, including returning arrays, error handling, better server-side rendering, and more.
+
+- **React 16: A look inside an API-compatible rewrite**  
+  https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/  
+  The React team describes how they handled building and testing React 16 to be backwards compatible with existing code.
+
 - **ReactConf 2017: A Cartoon Intro to Fiber**  
   https://youtu.be/ZCuYPiUIONs  
   A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations.

react-performance.md

@@ -142,7 +142,8 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
 
 - **Optimizing React Rendering**  
   https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02  
-  Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`.  Has a link to further discussion on HN.
+  https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f  
+  Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`.  Has a link to further discussion on HN.  Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations.
 
 - **Introducing react-wastage-monitor**  
   https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2  

react-redux-testing.md

@@ -237,6 +237,14 @@
 - **Testing Replicated Redux**  
   http://jimpurbrick.com/2017/07/31/testing-replicated-redux/  
   Describes how the use of "property testing" to generate possible actions helped the author track down bugs in his distributed multiplayer Redux application.
+
+- **Test-Driven Development with React and Redux, using Redux TDD**  
+  https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918  
+  Describes using a specific set of helper functions to drive testing the behavior and data flow of a React+Redux application.
+
+- **Writing tests for redux-observable**  
+  https://dev.to/julioolvr/writing-tests-for-redux-observable  
+  Quick examples of how to set up tests for redux-observable epics.
 
 
 

react-server-rendering.md

@@ -56,4 +56,9 @@
 
 - **Introducing Second: a framework for mostly-static React applications**  
   https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/  
-  Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive.
+  Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive.
+
+
+- **Simple declarative Redux state with React Router 4 server side rendering**  
+  https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d  
+  Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. 

react-state-management.md

@@ -2,6 +2,18 @@
 
 #### State Types and Data Flow
 
+- **A Visual Guide to State in React**  
+  https://daveceddia.com/visual-guide-to-state-in-react/  
+  Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates.
+
+- **ReactJS: Props vs State**  
+  http://lucybain.com/blog/2016/react-state-vs-pros/  
+  Explains that "props" are data passed in to a component, while "state" is data managed inside a component.
+
+- **Props vs State**  
+  https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
+  A quick summary of the differences between "props" and "state" in React components
+
 - **The 5 Types of React Application State**  
   http://jamesknelson.com/5-types-react-application-state/  
   Describes different categories of state: data, communication, control, session, and location
@@ -31,14 +43,6 @@
   http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html  
   Some excellent suggestions and approaches for state handling and structure.
 
-- **A Visual Guide to State in React**  
-  https://daveceddia.com/visual-guide-to-state-in-react/  
-  Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates.
-
-- **ReactJS: Props vs State**  
-  http://lucybain.com/blog/2016/react-state-vs-pros/  
-  Explains that "props" are data passed in to a component, while "state" is data managed inside a component.
-
 - **React state management patterns**  
   http://vijayt.com/post/react-state-management-patterns/  
   Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components).

react-styling.md

@@ -10,6 +10,10 @@
   http://andrewhfarmer.com/how-to-style-react/  
   An excellent overview of the four major ways to deal with styles in React, and what the various tools are.  Includes a decision tree to help you decide what to use.
 
+- **Understand the React Styling Paradigms**  
+  http://jsramblings.com/2017/09/22/understand-the-react-styling-paradigms.html  
+  An excellent, very readable summary of the three main ways to deal with styles in React (plain CSS, CSS modules, and CSS-in-JS).  Lists some pros and cons for each one, and points to some additional resources for learning about them.
+
 - **CSS in JS**  
   http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html  
   Christopher Chedeau's classic talk that inspired the "CSS in JS" revolution
@@ -111,6 +115,10 @@
   https://reactarmory.com/answers/should-i-use-css-in-js  
   Some opinionated thoughts on the pros and cons of using CSS-in-JS approaches, including concerns about possibly security issues.
 
+- **Writing a CSS-in-JS Library from Scratch**  
+  https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4  
+  The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work.
+
 
 #### Style Libraries
 

react-techniques.md

@@ -19,6 +19,10 @@
   https://www.robinwieruch.de/react-svg-patterns/  
   A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds.
 
+- **Translating React Apps**  
+  https://tech.gadventures.com/translating-react-apps-99dede52d924  
+  Discusses how to use the React-Intl library to add translations to a React app
+
 
 #### Security
 

react-tutorials.md

@@ -382,6 +382,11 @@ 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.
 
+- **Taming the State in React**  
+  https://www.robinwieruch.de/learn-react-redux-mobx-state-management/  
+  https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE  
+  A book and set of course material from the author of "The Road to Learn React", covering state management with setState, Redux, and MobX.  
+
 - **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.

redux-architecture.md

@@ -264,6 +264,10 @@
   https://medium.com/@uttamkini/scaling-redux-part-1-codebase-organization-80f978cd8a72  
   https://medium.com/@uttamkini/scaling-redux-part-2-organizing-state-8a1c5e8fffbf  
   Several suggestions for managing a Redux codebase, including use of feature folders / ducks, separating data and UI state in the store, organizing data by API structure, and more.
+
+- **Tips for success with React and Redux**  
+  https://medium.com/@AlexFaunt/tips-for-success-with-react-and-redux-b782c6b22ff0  
+  Advice on how much of your React component tree should be connected to Redux, using non-HTML components to manage things like document titles, consistently using actions for app behavior, and moving app logic out of components.
 
 
 #### Encapsulation and Reusability
@@ -423,4 +427,12 @@
 - **MVC implemented by React and Causality-Redux**  
   https://medium.com/dailyjs/mvc-implemented-by-react-and-causality-redux-c4125a01e95c  
   https://medium.com/@causality_redux/react-redux-how-to-write-significantly-less-code-c0562ff06d5a  
-  A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux.
+  A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux.
+
+- **Connecting React components to a Redux store with render callbacks**  
+  https://medium.com/@gott/connecting-react-component-to-redux-store-with-render-callback-53fd044bb42b  
+  Demonstrates using the React "render props" pattern to pass down data from a Redux store, rather than using `connect`.
+
+- **"Anyone using Redux with a render prop?"**  
+  https://twitter.com/threepointone/status/913701233394900992  
+  A Twitter thread discussing use of render props as an alternative to `connect`.  Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes.