Generate Strongly Typed React Components with GraphQL

Mat Warger AWS, GraphQL, JavaScript, Programming, Technology Snapshot 1 Comment

When developing in React, using a type system (like Typescript or Flow) can be a great help. You can be sure that your props and state are what you expect, at build-time, and code your components to match.

But what happens when you’re calling to an API to fetch some data, and the shape of that data is what really matters? Maybe the data get passed as props to a child component? You can create types for this, sure, but are they correct? Probably not! Or at least, probably not for long! Things change. Wouldn’t it be great if your types changed too?

In this post, we’re going to take a simple component from zero type awareness to fully typed, with local variables and GraphQL queries included, with a simple workflow. Grab a cup of coffee and a snack, and let’s see how this we can use GraphQL to generate type-safe components in React.

State Management with MobX and React

Nick Brown JavaScript, Problem Solving, React, Technology Snapshot Leave a Comment

There are many options when it comes to managing the state of a React application. Choosing the right one for your application can feel daunting.

The most popular choice, Redux, is often thought of as verbose because it requires a lot of boilerplate code, thus slowing down development. Redux is also very opinionated so it will take time for those unfamiliar with its functional programming paradigm to become comfortable with it.

In this blog, we’ll take a closer look at an alternative that aims to solve issues in React application state: MobX. To do that, I built a simple calorie counter application that will be used to showcase MobX in use.

AWS AppSync with Lambda Data Sources

Mat Warger AWS, GraphQL, JavaScript, Technology Snapshot, Tutorial Leave a Comment

The power of GraphQL lies in its flexibility. That is especially the case regarding resolvers, where any local or remote data can be used to fulfill a GraphQL query or mutation.

In this post, I’m going to demo a quick example of what this looks like, and a couple gotchas that were apparent in working with Lambdas as a data source for AppSync. Let’s gooooo!

Have You Plunk’d Lately?

Chris Berry JavaScript, Technology Snapshot Leave a Comment

More than once as a developer, I’ve come across the need to quickly prototype an idea or solution. This generally involves making a special project with all the necessary local parts, then going in and making the prototype. Doing this takes time and effort for something which in the end will probably just be throwaway code. Luckily I’ve now found a better way.

“Plunker is a tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.”

I’ve found Plunker to be a great tool to use when I quickly need to test out an idea or solution. I no longer have to go through the process of creating a whole application locally just to see if I can do a loop with some data or something else just as simple. Now I can simply choose a template from Plunker, and I can get down to business.

In this blog I will introduce Plunker, showing how to use it to quickly create and edit an Angular startup project…

Angular and Swagger: Experiences Learned

RJ Dela-Cruz Angular, JavaScript, Technology Snapshot Leave a Comment

Recently I was fortunate enough to be a part of a project where we were building an application from scratch into an Angular front-end application with Microservices in the back end. Swagger was used as the contract between the UI and Microservices.

In this blog, I talk about the things I learned from this project experience, like how to use Swagger to define the endpoints of the Microservices, integrating Swagger-generated code into Angular, and working with configuration (including oAuth2 tokens), among other “gotchas…”