Part 2: Navigation​ Setup with Node + Express ​

Chris Berry JavaScript, Microservices, Node, Single-Page Application, Tutorial, Vue Leave a Comment

This is an in-depth learning series focused on a specific application: a JavaScript-based suite of single-page applications optimized for use in a microservice environment. We focus on telling the story of “why” and “how” it was built.

In part one, we reviewed how the base application was created by using the Express Generator command line tool. We also reviewed the folder layout, look and feel, and an overview of what each section of the application does. In this post, we’re going to dive in a little deeper to the application and explain the why and how of the navigation setup for this application….

Part 1: JavaScript Application Introduction

Chris Berry JavaScript, Node, Single-Page Application, Technology Snapshot, Vue Leave a Comment

Part of the Solid Foundations Learning Series
This is the introductory post to an in-depth series of articles that will tell the story of why and how a specific web application was built. In a nutshell, it is a JavaScript-based suite of single-page applications optimized for use in a microservice environment.

In this post, we will set the stage for the series and introduce the overall design and structure of this application. In future posts of this series, there will be technical discussions about certain parts of the application and there will be theory discussions for other aspects of the application.

The web application we will be talking about started its life as a simple NodeJS and Express application….

JavaScript Bake-Off: Angular, React, and Vue

David Pitt Angular, JavaScript, Opinion, React, Single-Page Application, Vue Leave a Comment

As Keyhole consultants, we are exposed to a plethora of technology stacks and implementations from client project to client project. Particularly with our enterprise clients, great care must go into selecting the best technologies for the company’s technical needs and current landscape. After all, they don’t want to be re-writing the same application in just a couple of years due to lackluster choices and shortage of developers to add functionality.

In this post, we present an open source reference application developed three times using three different frameworks, React, Vue & Angular.

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…