Things to read and learn (JavaScript, React, Redux, React Native, Funcional Programming)

read-and-learn.md

Things to read, learn and take a look

A list of topics to study before implementing a large scale React application

Front-End

React

• Presentational and Container Components – Dan Abramov – Medium
• How To Scale React Applications – Smashing Magazine
• Advice on large scale React.js apps, rebuilding the biggest social publishing platform for Latam
• Tips For a Better Redux Architecture: Lessons for Enterprise Scale
• Large open source react/redux projects
• sound-redux
• Organization
  • Project Structure
  • How To Scale React Applications
  • Three Rules For Structuring (Redux) Applications

React Router

• A Simple React Router v4 Tutorial
• Switch
• Code Split with Webpack
• Code Split Example

React Native

• Code Sharing Between React Native and React Web Apps
• Sharing Code between React Web and Native Apps Using redux-saga To Simplify Your Growing React Native Codebase

Redux

• Redux Ecosystem
• Usage with React
• ToDo Example
• Large SPA boilerplate use react redux
• [WP] Redux state organization with large application (source)
• How to use Redux on highly scalable javascript applications?
• Redux AJAX request examples
• Usage with React Router
• Timers in React Apps with Redux
• A Beginner's Guide to Redux Middleware (timers)
• Discussion about action constats names (redux issue) (wp example)
• Actions (playing sound) based on Redux store changes
• Flux Standard Action
• Organization
  • Where should my “business logic” go?
  • Where do I put my business logic in a React-Redux application?
  • https://github.com/erikras/ducks-modular-redux
  • Action names reduxjs/redux#786

Redux Saga

• Managing Side Effects In React + Redux Using Sagas
• Redux Saga: Você no controle das operações assíncronas
• What is the difference between a saga, a process manager and a document-based approach?
• redux-saga - Saga Middleware for Redux to Handle Side Effects - Interview with Yassine Elouafi
• JavaScript Power Tools: Redux-Saga
• Discussions
  • Different ways to watch actions
  • https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async
  • How to cancel "all"?

Testing

• Testing Redux
• https://github.com/wix/redux-testkit
• Unit Testing React Components: Jest or Enzyme?
• React and Enzyme example
• Testing Components
• Enzyme
• enzyme-matchers for React
• Am I testing connected components correclty?
• http://redux.js.org/docs/recipes/WritingTests.html

Advanced ES6 Features

• Generators
  • The Hidden Power of ES6 Generators: Observable Async Flow Control
  • The Definitive Guide to the Javascript Generators

Functional programming

• Why care about functional programming? Part 1: Immutability
• What is a Pure Function?-
• What is Thunk

Immutability

• Efficient implementation of immutable (double) LinkedList
• Anjana Vakil: Immutable data structures for functional JS | JSConf EU 2017

Offline first & Progressive Web Apps

• The App Shell Model
• Offline-First Architecture for Progressive Web Applications and React Native
• redux-offline
• create-react-app + sw-precache = PWA
• https://github.com/GoogleChrome/sw-precache
• Progressive Web Apps with React.js: Part 3 — Offline support and network resilience
• Redux Persist
• How to refresh the page after a ServiceWorker update?
• Service Worker Issues
  • https://stackoverflow.com/questions/41891031/refresh-page-on-controllerchange-in-service-worker
  • https://stackoverflow.com/questions/41502870/service-worker-reload-page-on-cache-update
  • https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js

Webpack

• A beginner's guide to Code Splitting with React Router and Webpack 2
• Code Spliting
  • https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers
  • Extract text chunks
• Plugins
  • https://github.com/dominique-mueller/simple-progress-webpack-plugin
  • https://github.com/faceyspacey/extract-css-chunks-webpack-plugin
• Hot Loading
  • Redux HMR
  • https://github.com/gaearon/react-hot-loader
  • https://webpack.js.org/guides/hot-module-replacement/
  • https://github.com/KleoPetroff/react-webpack-boilerplate
• Split Config
  • https://github.com/react-boilerplate/react-boilerplate/commit/d61413074e1463e1f959e59878381e968558745b
  • https://github.com/goldhand/cookiecutter-webpack/tree/master/%7B%7Bcookiecutter.repo_name%7D%7D/config
• Cache
  • https://webpack.js.org/guides/caching/
• Issues
  • Moment locale issue
  • Generate CSS from chunks

Server-side

JSON Web Token

• Introduction to JSON Web Token
• Securing React Redux Apps With JWT Tokens
• Express JWT Permissions

Amazon S3

• Static Website on S3
• Deploying create-react-app to S3 and CloudFront

Libraries to take a look

Browser/Server

• https://www.npmjs.com/package/debug (example)
• https://github.com/mafintosh/is-my-json-valid
• https://codemix.github.io/flow-runtime/#/

Redux

• https://github.com/acdlite/redux-actions
• https://github.com/acdlite/redux-promise
• https://github.com/gaearon/redux-thunk
• https://github.com/jaredpalmer/formik
• https://github.com/kuy/redux-tower

Yarn

• Interactive Upgrade

Others

Services

Package Quality