Technology

Eleni Chappen

What I’ve learned from a few large-scale React and Redux projects

Dec. 8, 2017

A friend of mine recently starting a new job where he’ll be working a lot in React and Redux, and asked me if I had any strategies or best practices, particularly with large-scale projects.

I wish I could tell him that I do. But honestly, every time I make a framework-specific rule, I quickly come across a situation where the best solution is to break it.

What I have come up with are a few benchmarks that guide me to making sure my React code is understandable to other developers, and to Future-Me.

1. All of my logic is tested

When I ensure that all of my logic is tested, whether it’s component/view logic or action-related logic, I naturally fall into healthier coding patterns. I extract unnecessary responsibilities from my components. I write more helper functions and utility modules. I can better determine when state should be kept locally or remotely.

This also helps me determine what packages I want to introduce to my app. For example, people often debate whether Redux is an appropriate tool for their project. The co-author of Redux has even said that for many cases, local state is just fine. In my view, if Redux helps you test your logic, then you are gaining a big advantage by using it. Since reducers are supposed to be pure functions, testing them is incredibly straightforward. Action creators can be tested in isolation outside of your components. If you use any middleware to perform asynchronous requests, these can be tested in isolation as well.

Testing view logic should not be ignored either. If testing your components becomes cumbersome, or if you’re stubbing too many functions in order to test them, that’s a good sign your component is doing too much.

2. My Redux actions tell a story

Redux Dev Tools is indispensable to me when I’m building an app, and when I’m debugging one. These tools allow you to view all of your actions in real time, rewind and replay actions, and dig into the current state for each action.

The list of action names that Redux Dev Tools gives you should tell the story of your user. They should give you a crystal clear understanding what what your user is doing at any given time. An action like SEND_API_REQUESTED is way less understandable to a new developer than an action like USER_LOG_IN_REQUESTED, because it lacks the context of the user experience. Giving your actions this context helps a lot when debugging.

Redux actions should also show you the result of any asynchronous requests you make. So if I see a USER_LOG_IN_REQUESTED in my list of actions, I should know to expect a USER_LOG_IN_SUCCEEDED or USER_LOG_IN_FAILED action shortly afterward.
Using a redux middleware like redux-saga helps me keep track of asynchronous requests and their effects. With dev tools I can clearly see the order of these requests and the effects of their responses.

3. I know how to use a React component without looking up a working example of it in the codebase

If I’m looking at a component definition, I should be able to:

  1. determine whether this component is for global use or context-specific use. Often this is achieved by defining the component within certain directories, like components/elements/forms/textInput.js.

  2. know exactly what props this component receives. This can be done by using React’s prop-types package, which now allows you to more accurately define the shape of your props. So instead of doing this:

user: PropTypes.object.isRequired  

I can do this:

user: PropTypes.shape({  
  id: PropTypes.number.isRequired,
  first_name: PropTypes.string,
  state: PropTypes.oneOf(['pending', 'active', 'archived'])
}).isRequired

I feel like I’ve only scratched the surface here, but it’s a start. Happy coding!

Eleni Chappen

What People Are Reading

News

10/18/17

ChangeMaker Launches!

In a world where marches and protests are making weekly headlines, people are always looking for the next cause to get behind.

But what do you do when a cause or issue you’re passionate about needs more awareness and support? How do you find people to come together? How do you organize people, activities, events, and whatever else you might need to do? And if you do find people, how do you manage all the different moving parts?

And, well, what does that have to do with us at 20spokes?

Meet ChangeMaker -- a project we recently completed and launched.

Similar to sites like Kickstarter or Indiegogo, ChangeMaker allows organizations to add a project and find fellow activists to donate to or join the cause as a volunteer. The interface provides organizations the ability to detail an issue or problem, outline a solution, and how donors or volunteers can help. When people join the project as a volunteer, they can specify their particular skillset in fields such as marketing, design, legal, or data so project managers can delegate tasks to the right people.

With funding from donations, users can work on projects for their cause by using the free website. While most project management tools have some sort of fancy, pay-to-use features, ChangeMaker is completely free to use because it is donor funded and donor maintained.

We branded, designed, and coded the ChangeMaker platform in a Rails environment. We also integrated Stripe Connect, which enables organizations to receive those donations they need to power their projects.

Putting all this together sounds like it would take a good chunk of time, right? But we kicked off this project on August 8 and launched the website this week. A little more than two months. Not too shabby, eh? Just in time for the Newfounders Conference. ChangeMaker will have a big presence at the conference with donors ready to help out organizations that have ready-to-pitch projects for its demo night. Nothing is too small or too large for ChangeMaker to help its users and organizations tackle.

Give ChangeMaker a whirl at changemaker.newfounders.us.

Operations

8/1/16

Good Founders Make Good Clients - 5 Traits We Look For

“Ideas are easy. Implementation is hard.” – Guy Kawasaki

As a development agency that primarily works with early stage startups, we hear all kinds of business ideas. You could even say that we're in the business of building business ideas; but only one's we believe will succeed, and not on our own. We know that, without a good founder to drive implementation, even the best ideas will surely fail. In fact, most give up at the first sign of real challenge, and their ideas never see the light of day. So while we spend time evaluating the viability of the idea, we must also consider if the founder has what it takes. Here are the 5 traits we look for:

1. Tenacious belief. Some traits can be learned or honed; this is not one of them. Startups are inherently difficult, demanding, and full of unknowns and disappointment. To make it through, a founder needs confidence, determination, passion, and the like - things you can't have without first believing. We're not talking about simply believing you have a good idea. We're also not talking about blind belief to the point of delusion. This is believing strongly enough in your vision that, despite the uncertainties and inevitable struggles in your path, you will do whatever it takes to see it through.

2. Domain expertise. Serious founders need to understand their market as much as possible. Ideally, you can directly relate to the problem you're trying to solve - or - you have extensive experience that gives you insight on your target market. Even then, the best founders do everything they can to consistently learn and absorb new information.

3. Communication. The greatest entrepreneurs are masters of communication. Not all start out that way, but its something to be conscious of and constantly improve. A good founder has the ability to communicate clearly, confidently, and candidly. They can clearly explain their thoughts and ideas. They use confidence to sell themselves and their vision, as well as to lead others. They can candidly express their feelings, while maintaining control of their emotions.

4. Head in the clouds, feet on the ground. Growing a startup requires constant innovation. A good founder has vision; they dream big and consistently ask themselves, "what's next?" However, that vision will never materialize unless a founder can execute in the present. A good founder can keep their eyes to the future while practicing self awareness, focus, patience, and responsible decision making.

5. Flexibility. The survival of a business, like in nature, depends on its ability to adapt. No matter how much a founder plans, new information will arise and circumstances will change; a good founder is prepared and willing to respond. Some changes will inevitably result in failures. A founder must have the resilience to pick themselves up, learn from the failures, and push on.

6. Enjoys the ride. I know I said 5 traits, but this one's pretty important too. Yes, starting a business is difficult, risky, blah blah blah...but what's the point if you can't enjoy it? Having fun will not only make your life (feel) easier; attracting advocates, customers, employees, and investors will be easier as well.

Now these aren't the ONLY things a founder needs to build a successful business, nor do they guarantee success, but we'd bet on you. So if you have a great idea and "what it takes" (see above), we should meet.