Improving Performance in React Applications

Adrienne Gessler Articles, Design, JavaScript, React 2 Comments

Letโ€™s say youโ€™ve stepped into a React application to make some updates or been involved in building one yourself. You have been at it a while, and feel somewhat comfortable using React, you understand Reactโ€™s lifecycle and you may be using React libraries like Redux or MobX to some extent.

As with any technology, you start to notice that a few of the pages are looking a little slow. You know performance tuning too early is often a bad idea, but you feel like you might be at that point. After all, in your experience, end users notice even small lags and no one wants that. So what do you do now?

In this blog, I introduce six tips for improving performance and design in your React application.

State Management with MobX and React

Nick Brown Articles, Development Technologies & Tools, JavaScript, React 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.

Have You Plunkโ€™d Lately?

Chris Berry Articles, Development Technologies & Tools, JavaScript 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…

Keyhole Software Releases React Guitar Tuner Application

Keyhole Software Articles, Community, Company News, Keyhole, Keyhole Creations Leave a Comment

Keyhole Software is proud to announce the release of theย Keyhole Guitar Tuner application. This open source application provides audio for tuning guitars.

With the free web application, users can select any listed guitar tuning note and various audio samples for each note are played.ย The application features different ways to listen to the tuning audio including playing a single note continuously, listening to the notes played in one strum, or playing the “tune” option that plays each note five times.

This application was built by…

Getting Started with React and JSX

Chris Shatrov Articles, Development Technologies & Tools, JavaScript, React Leave a Comment

I have been with Keyhole Software for nearly four years. Every time I write a new blog post it is about a new framework that I had to pick up and learn that year.

I write a lot of JavaScript daily, but previously never had the chance to start coding a project with React. But this year, I worked on a project with React. So as expected, I wanted to share my thoughts and my experiences with React.

In this post, I will give a quick introduction to React and talk about its main, most important, components. We will also take a peek at JSX and explain it, and show some code examples, which will help you have a better understanding of this library before you can move on to more complex things…