はてなブックマーク

In this series we are looking at code organization in the context of a React and Redux application. The takeaways for the “Three Rules” presented here should be applicable to any application, not just React/Redux. Series contents Part 1 - Three Rules for Structuring (Redux) Applications Rule #1: Organize by feature Rule #2: Create strict module boundaries Rule #3: Avoid circular dependencies Part

Redux is a Flux-like framework that has exploded in popularity within the React community. It reduces complexity by enforcing a unidirectional data flow, the use of single state atom, and pure reduce functions for state updates. For me, there has always been one thorn in the React+Flux setup, which is that more complicated processes involving coordination of action creators and side-effects are ha

The release of TypeSciprt 1.6 includes support for React components. I decided to give it a whirl and see what TypeScript has to offer. The end result is a port of the Redux TodoMVC example to TypeScript. (See my repo on GitHub) So why use types in the first place? Isn’t the dynamic and flexible nature of JavaScript what makes it so great in the first place? As strange as it sounds, I actually bel

In this post I want to explore the idea of using contexts in React to implement dependency injection (DI) in our application. We’ll cover two things: What contexts are in React and how they work Why we care about DI and how we can implement them using contexts. React and Contexts Contexts were formalized in React 0.12, and are planned for React 1.0. They are a mechanism for a component to pass pro

Flux is an application architecture designed by Facebook for their JavaScript applications. It was first introduced by Facebook in May 2014, and it has since garnered much interest in the JavaScript community. There are several implementations of Flux. Frameworks like Fluxxor keep to the original Facebook Flux pattern, but reduces the amount of boilerplate code. While other frameworks like Reflux

There’s been a lot of discussion on what Flux is, the different variations, and how the pattern can be improved upon. I’ve even blogged about Flux here on this blog! I’ve been doing a lot of work with React and Flux in the past month. In that time, I learned a lot about architecture, patterns, and community best practices. I want to share some ideas that I’ve been thinking about here. In this post

One of the new features of ECMAScript 2015 are template literals. The simplest use cases for template literals are creating multiline strings, and doing string interpolation. Multiline string: let s = `This is a multiline string`; String interpolation: let firstName = 'Bob', lastName = 'Smith'; let msg = `Hello ${firstName} ${lastName}!`; // 'Hello Bob Smith!' You can also tag template literals by

AngularJS has been instrumental in changing the way I develop web applications. From building imperative views where both business logic and user interaction live, to separate controllers and directives that handle both requirements respectively. From sharing components through jQuery plugins, the usual common denominator, to sharing components through declarative HTML. From reacting to model chan

Just when you think that you're in control, Just when you think that you've got a hold, Just when you get on a roll, Here it goes, here it goes, here it goes again. OK Go - Here It Goes Again And so the evolution of front-end development continues with Gulp, the new build system that has already garnered praise amongst many web developers. After spending some time reading the docs and playing arou