From c1f7b7a7984f98263e42d418eff7033122f39346 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 31 Dec 2016 18:05:37 -0500 Subject: [PATCH] Updates, 2016-12-31 --- es6-features.md | 3 +++ mobx-tutorials.md | 4 ++++ pros-cons-discussion.md | 20 ++++++++++++++++++++ react-ajax.md | 29 ++++++++++++++++++++--------- react-architecture.md | 4 ++++ react-component-patterns.md | 6 +++++- react-native.md | 10 +++++++++- react-routing.md | 4 ++++ redux-techniques.md | 11 +++++++++++ redux-tutorials.md | 4 ++++ static-typing.md | 4 +++- 11 files changed, 87 insertions(+), 12 deletions(-) diff --git a/es6-features.md b/es6-features.md index bc991c4..2785fd8 100644 --- a/es6-features.md +++ b/es6-features.md @@ -165,6 +165,9 @@ http://www.datchley.name/promise-patterns-anti-patterns/ Some advice for good usage of Promises +- **Broken Promises** + https://mockbrian.com/blog/2016/12/29/broken-promises/ + Some useful tips for dealing with promises. #### Techniques diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 6909947..ccbdb69 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -45,6 +45,10 @@ https://swizec.com/blog/awkward-thing-mobx-complex-models/swizec/7260 Discussion of potential issues when handling complex models, and some possible workarounds. +- **MobX - Like React, but for Data** + http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html + Thoughts on MobX's core concepts, and how they relate to immutability, derived data, and observables. + #### MobX and Redux Comparisons diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index c428abf..7958764 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -42,6 +42,26 @@ http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux Another good post from Redux's author comparing Redux and Flux + +#### Other Comparisons + +- **Flux is the new WndProc** + https://bitquabit.com/post/the-more-things-change/ + https://news.ycombinator.com/item?id=10381015 + An intriguing comparison between a React + a Flux-type architecture, and the classic Win32 WndProc message switch handling approach. Plenty of good discussion in the comments. + +- **I'm Sticking with React (For Now)** + https://hackernoon.com/im-sticking-with-react-for-now-47b792be555d + Some thoughts on the differences between React and other similar libs like Preact and Inferno, and why there's value in staying with React. + +- **My experience with Redux** + https://medium.com/@ajchambeaud/my-experience-with-redux-90e4e4a31518 + A look at Redux's influences, some experience using Redux, Dan Abramov's involvement with the community, and some other libs that may be interesting to look at. + +- **What's good about Redux** + http://danielearwicker.github.io/What_s_good_about_Redux.html + Some thoughts on Redux's core "what-if?" questions, and some of the potential implications of those decisions. + #### Comment Threads and Discussions diff --git a/react-ajax.md b/react-ajax.md index 460d6dd..ab1c9fa 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -1,5 +1,11 @@ ### React and AJAX +#### Basic Concepts + +- **AJAX Requests in React: How and Where to Fetch Data** + https://daveceddia.com/ajax-requests-in-react/ + An overview of where AJAX requests fit into React usage. + - **React AJAX Best Practices** http://andrewhfarmer.com/react-ajax-best-practices/ Covers four ways to approach managing queries and data fetching. @@ -8,6 +14,9 @@ http://andrewhfarmer.com/ajax-libraries/ A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. + +#### Request Implementation Examples + - **Implementing React Redux with GraphQL** https://marufsarker.github.io/blog/posts/2016/05/09/react-redux-with-graphql.html Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions. @@ -24,18 +33,20 @@ http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/ A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI. -- **AJAX Requests in React: How and Where to Fetch Data** - https://daveceddia.com/ajax-requests-in-react/ - An overview of where AJAX requests fit into React usage. - -- **Slaying a UI Antipattern in Fantasyland** - https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a - Examples of how to handle the common "loading/no data/data" issue with some static typing and FP principles. - - **Handling AJAX In Your React Application with Agility** https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware + +#### Handling Request Status with State + - **React-Redux issue #210: "dispatching in componentWillMount?"** https://github.com/reactjs/react-redux/issues/210#issuecomment-244774674 - Some valuable extended discussion about how managing requests and data really involves several distinct possible states. \ No newline at end of file + Some valuable extended discussion about how managing requests and data really involves several distinct possible states. + +- **"Slaying a UI Antipattern" comparisons** + http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html + https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a + https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b + Three articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. + \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index 334b30b..7358e23 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -87,6 +87,10 @@ https://tylermcginnis.com/react-aha-moments/ Tyler McGinnis shares some of his own "aha" moments in thinking about React +- **From Backbone to React: How to write great code** + https://frontendne.co.uk/talks/from-backbone-to-react-how-to-write-great-code + A talk that looks at a number of key ideas that React helps you understand, and uses some comparisons between Backbone and React to illustrate them. + #### React Best Practices diff --git a/react-component-patterns.md b/react-component-patterns.md index 5ff3239..b53ffeb 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -2,7 +2,7 @@ **Related topics**: - [Thinking in React](./thinking-in-react-and-flux.md): Articles discussing ways to think about React applications and component structure -- **React Implementation and Concepts**: Includes articles that explain the differences between "components", "elements", and "instances" +- **[React Implementation and Concepts](./react-implemenation.md)**: Includes articles that explain the differences between "components", "elements", and "instances" #### Terms and Concepts @@ -78,6 +78,10 @@ http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/ Another good list of component communication strategies +- **How React Components Communicate** + http://react.tips/how-reactjs-components-communicate/ + A careful tutorial-based explanation of how to communicate between parent and child components. + - **How to handle React context in a reliable way** https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc Covers what the `context` feature is, how to use it, and some concerns to be aware of. diff --git a/react-native.md b/react-native.md index 6bc2d6c..4b35fc5 100644 --- a/react-native.md +++ b/react-native.md @@ -37,4 +37,12 @@ - **Rapid cross-platform development with React Native** https://robots.thoughtbot.com/rapid-cross-platform-mobile-development-with-react-native - Thoughts on how React Native enables code reuse and iteration, and a look at using the flexbox-based layout system on various platforms. \ No newline at end of file + Thoughts on how React Native enables code reuse and iteration, and a look at using the flexbox-based layout system on various platforms. + +- **Debugging React Native Applications** + https://medium.com/reactnativeacademy/debugging-react-native-applications-6bff3f28c375 + A useful description of tools and techniques that can be used to help debug RN apps. + +- **Under the hood of React Native** + https://speakerdeck.com/mkonicek/under-the-hood-of-react-native + A slideset digging into the guts of how React Native works \ No newline at end of file diff --git a/react-routing.md b/react-routing.md index 7d1e590..c664635 100644 --- a/react-routing.md +++ b/react-routing.md @@ -29,6 +29,10 @@ https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355 A quick example of using React-Router v2 in a small React app +- **React-router alternative: switch** + https://medium.com/@daveford/react-router-alternative-switch-acd7961f08db + Some examples of simply using switch statements and the history API for routing + #### Authentication diff --git a/redux-techniques.md b/redux-techniques.md index 99faaec..cb9c404 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -139,6 +139,10 @@ - **Should you store your form state in Redux?** http://goshakkk.name/should-i-put-form-state-into-redux/ Thoughts on the tradeoffs involved in storing form data in component state vs Redux, and different potential use cases. + +- **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. #### Other @@ -174,6 +178,13 @@ https://medium.com/@clrksanford/persist-ence-is-key-using-redux-persist-to-store-your-state-in-localstorage-ac6a000aee63 A quick introduction to using redux-persist to reuse store state between page refreshes +- **Immuto: Strongly Typed Redux Composition** + http://danielearwicker.github.io/Immuto_Strongly_Typed_Redux_Composition.html + http://danielearwicker.github.io/Immuto_Working_with_React_An_Example_.html + http://danielearwicker.github.io/Immuto_Radical_Unification.html + http://danielearwicker.github.io/Immuto_Epilogue.html + An interesting series of experiments in adding typed cursor-like behavior to Redux. The author appears to give up on the idea in the end, but the writing and thought process are informative. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index c771d77..337319b 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -183,6 +183,10 @@ A nifty 8-part series that demonstrates building a CRUD app, including routing, AJAX calls, and the various CRUD aspects. Very well written, with some useful diagrams as well. +- **A comprehensive React-Redux tutorial** + https://spapas.github.io/2016/03/02/react-redux-tutorial/ + A very long, detailed article that digs into Redux's concepts, and builds a book management application in the process. + #### Using Redux with non-React Frameworks diff --git a/static-typing.md b/static-typing.md index f41c58b..05097a1 100644 --- a/static-typing.md +++ b/static-typing.md @@ -150,4 +150,6 @@ https://gist.github.com/voltrevo/ecb5b7292707d29b13ae453ae0b529d9 A comparison of common features, advantages in either system, missing features, and other aspects. -- \ No newline at end of file +- **TypeScript vs Flow** + https://github.com/niieani/typescript-vs-flowtype + An in-depth, unbiased comparison of differences and similarities between TypeScript and Flow \ No newline at end of file