Showcase of React + Redux Web Application Development

Jian Li JavaScript, React, Single-Page Application, Tutorial Leave a Comment

In the last few years, React has continuously gained popularity for the development of web applications. At Keyhole, we have several blogs talking about React and related technologies, including React, Formik, react-router, and many others.

So why would we need Redux? Quite often when we develop applications, we start with small pieces. As the business requirements change, new features/modules/components are added/removed/updated. Particularly in enterprise applications, you may end up with a deep hierarchy of parent-child relationships.

In a React application, parent component-states are passed down to its child component as property. Application states can be changed in many different places. If not managed perfectly (and, in many cases, it’s not), your system can behave differently than expected. It can become increasingly difficult for development, debugging, production support and code maintenance.

In this blog, I’ll talk about Redux and explain how it can benefit React front-end development. I’ll provide an introduction to using Redux with React and show a demonstration of reconstructing an example React application to React + Redux.

I’ll re-construct this React application into two projects. The first project will be the back-end server application which will handle all the typical business in the server end, like registration, authentication, database operation, etc. I’ll use MongoDB to persistent data and Node.js for REST API development. You can also reference RESTful API development to the Github repository open source khs-convo, released by Keyhole Software.

The second project will be pure front-end development, which will React with Redux for state management. React with Redux integration is the focus of this blog…



React NowPlaying Educational Application

Lauren Fournier AngularJS, Company News, JavaScript, Keyhole Creations, React, Single-Page Application, Technology Snapshot Leave a Comment

We at Keyhole have been helping our clients adopt JavaScript-based single-page applications for over five years. We have been impressed with the adoption and advancement of the ever-changing JavaScript ecosystem.

React is a JavaScript technology that our teams enjoy working with. However, React differs from the other frameworks we’ve worked with in a handful of ways.

The best way to learn a new technology is to actually do something with it, as opposed to simply reading about it. So, we created a tangible React learning application to help our team get up-to-speed. The application repository has now been released publicly to help others learn.

Pull down the repo & try out React!



Angular State/Country Directive

John Holland AngularJS, JavaScript, Single-Page Application Leave a Comment

A Lesson In ROI: Scratch vs. Adapt Existing Angular Code

On a recent client project, I needed to develop an Angular front-end for a form that included address information. As part of the address information, there were State and Country fields. I knew I needed to make these select lists, because from a UX perspective, it would be crazy to leave them as regular old text inputs. I knew I wanted to create directives to implement these select lists. I also knew I probably wasn’t the first developer to ever want to do this.

In this blog, I talk about a decision that all developers face every day: how to solve programming problems in the best way with the best use of time. The scenario we’ll talk about shows the use of Angular directives for creating select lists for country and state. In doing so, it provides a good understanding of Angular directives as one possible way they can help make Angular development great.



Converting Enterprise Applications to TypeScript

Clayton Terry JavaScript, Single-Page Application, Technology Snapshot, TypeScript Leave a Comment

We have all been there: some new technology comes out and we know it would improve our maintainability. But we can’t use it. We already picked a technology, it is already implemented, and we can’t change it now. We are stuck.

TypeScript does not work like that. TypeScript is JavaScript, and JavaScript is TypeScript. What this means is any existing files you have are compatible with any new file you add.

So why waste time changing if it’s all the same anyway? TypeScript has some great advantages that JavaScript does not. In this blog I will introduce some of those advantages, as well as some troubleshooting tips for if you run into issues when you choose to convert to TypeScript…