The Kinetic Platform is an enterprise forms and workflow framework used by some of the world’s largest organizations to build applications that can be tailored to very specific business needs. At its core, the Kinetic Platform is used to build forms that capture data which are partnered with workflow to accomplish custom functionality (we call it “Beautiful frontends for complicated backends”). Our most common solutions and implementations tend to be used for internal business processes of some sort like: Service Portals, Employee Onboarding, Customer Support and a variety of custom business applications to streamline operations.
A Little Background
Behind the scenes, the Kinetic Platform is primarily a java based web application and therefore most of our early implementations leveraged JSP (JavaServer Pages) to render UI’s. Although flexible, JSP’s required server access when a customer needed modifications and required developers to have Java development knowledge. As our target market began to shift towards a low-code and SaaS model, it was obvious that we needed to pivot away from JSPs.
A few years ago, the Kinetic Platform was rebuilt to be 100% API first. This created an opportunity to leverage different client-side frameworks, to build user interfaces, to interact with forms and the data they collect. More recently, we began to publish prebuilt solutions in client-side frameworks for customers to get up and running quickly, and then tweak to meet their needs. This led to the big question — which framework to choose?
Time to do Some Research
Being a software company that sells a platform isn’t easy. In every development sprint, we’re considering if a new feature will make it easier to build and also keep it flexible for all use cases. One of the truths that we’ve come to understand is that occasionally, our customers need modifications for their specific business needs and we can’t account for each of these needs in our low-code builders. This leads to the big question:
“How can we make this easy for the citizen developer?”
Our Requirements
- No server access needed for code changes
- Modern tooling and plenty of help available via google
- Local development against production data
- Proven at scale
- Heavy reuse of components
- Leverage existing libraries
- Testable Components
The Short List
Our developers spent some time digging and quickly narrowed in on these two: Angular v2 and React. Both of these frameworks met all of our requirements, and all choices have pluses and minuses. However, for us, one became the clear leader very quickly.
Angular v2
At Kinetic Data, we already had some experience with Angular. We had developed one of our apps and some of our admin consoles in Angular and we became quite familiar with it. That said, the learning curve was pretty steep and required us to think significantly differently about the way we architected our interfaces; building templates and injecting logic into them. It was so foreign that it required an Angular book open at all times to follow the syntax. In addition, you really had to accept the Angular way and build up your whole app with that strategy. It was not easy to “slowly introduce” Angular into our front-end system.
React
We heard tons of buzz about React as a great UI system. And we quickly learned why; React is a Javascript Library and not a complete framework. It was easy for us to dip our toes into the code. We didn’t need to understand all of the nuances before getting started; getting to “hello world” took all of 2 minutes! Splitting up the code and making it reusable was also something we found pleasantly easy. It was something we’d been trying to do for quite some time using our previously mentioned JSP strategy. In many of our interfaces, we have a widget that needs to be used over and over again and React makes it dead simple to build these components and reuse and share them.
Why We Chose React
As mentioned above, we had used Angular in the past and it didn’t gain much traction. We knew that any client-side strategy would be a big paradigm shift from “the JSP world” however because most of our company and customers already knew Javascript we felt that React would be the least disruptive and easiest to adopt.
It’s Just Plain Javascript
React is a JavaScript library for building user interfaces. It doesn’t require you to learn some new, obscure language. Simply put, React is just using JavaScript to produce HTML and CSS which didn’t seem like a huge mental leap, just using something we know in a different way.
Because our customers already are familiar with JavaScript, we felt that React would be easier to learn than Angular. For instance, in our form builder we use plain Javascript expressions to evaluate if a field should be required or not.
Passionate Developer Community
Whenever we choose to bring in a new technology, one of the first things we check out is how active the community is. Some of the things we were looking for were:
- Compatible Libraries that we could leverage to avoid re-creating the wheel
- Getting Started Examples
- Compatibility with other frameworks we use (bootstrap…etc)
- Recent Releases
- Number of pull requests and contributors
Another huge bonus is when the technology you are adopting was built / sponsored by a well-established business. In the case of React, Facebook has certainly done a great job documenting and providing tutorials, samples, and tooling to the community.
Lightning Fast Rendering
When building digital experiences, a speedy interface isn’t nice to have, it’s a must-have. Any client-side rendering strategy would have given the Kinetic Platform a great speed improvement, but React certainly made speed and optimization easy to achieve. React gives us:
- Excellent caching
- In memory page transitions
- Reused components
Flexibility
When building something that will be used in ways that you can not predict, flexibility is a high priority. React is delivering on that flexibility. With React, we are able to bring the development to local developer’s machines for them to experiment, set breakpoints, comment code, and change logic, all without affecting the application for other users. React’s developer tools and plugins give capabilities that were previously not available. However, flexibility is a knife that cuts both ways, and with that flexibility can come chaos. The natural componentization and reusability in React seem to justify the flexibility.
Happily Ever After
So we’ve been at this React thing for about two years now.
Internal Alpha Testing
We started out with our core developers rebuilding our solutions (Service Portal and Onboarding) in React. Our team is used to working with and learning new technologies so they quickly saw the benefits and went full speed. That said, it was more of a challenge to get our consultants to embrace React. Our consultants are very time/results driven and do not have the luxury of spending weeks/months to learn new technologies as part of an implementation. They are generally working on the last mile of a project, and as a result, they end up tweaking what exists to get it to meet specific use cases.
For our consultants, the move to React required not only learning React best practices & conventions but also learning how to use the library our developers built for them to integrate with our Platform. The latter part was especially difficult considering the library evolved quite a bit and had limited documentation. However, once we settled down on our packaging and build processes, naming standards, etc… it became much easier. We eventually had all the consultants go through the Udemy React/Redux class (https://udemy.com/react-redux/) for a primer on how React functioned. Then they were given our solutions to perform the “last mile” set of changes similarly to how it was built in the JSP world.
Here’s an example of some code from our old JSP’s compared to how it looks now in React; React is on the right 
In general, it was a month or two of relatively frequent React usage that brought this change. Now, our teams think in a “React first” way and are benefiting greatly.
Our thinking has changed, consultants are able to have their own local UI against production or test data and the modifications to the UI are only be visible to them. This gives everyone greater freedom to make changes, resulting in a faster change cycle for UI modifications.
Because of the reuse and componentization strategies in React, each solution is familiar in composition. We are able to jump into one another’s projects and provide value much more quickly. Also, the ability to have local copies of interfaces allows for experimentation with reduced risk.
Releasing to Customers
One of our biggest concerns was customer adoption. This change was significant enough that we expected slow customer adoption. To our delight, however, we were met with no resistance. Our customers provided positive feedback in early demos, and the many benefits beat any objection to change. From speed benefits to the simplification of administration to the reduced risk while building UI; the customers could see the major improvements.
We were delighted to learn many of our customers had embraced React. This makes things easier for our customers in new and unique ways without taking on additional risk or having to learn a new way of doing things. The future looks bright.
Where We’re Headed with React
All New Solutions Built in React
The Kinetic Platform is complete, we have a number of existing solutions with more to come. Each new solution will all be built using React.
Native Applications
React Native allows you to write applications yet compile them into native applications for phones, tablets, and even computers. This approach allows us to leverage some of the native capabilities of those devices. Access to the camera to scan a barcode, access to location services to find nearby inventory, and the ability to store data locally and sync later are all things that would be possible with React Native.
Wrapping Up
React has opened a lot of capability to the web application world. These new capabilities can improve existing applications and frameworks. We think React is a fantastic technology and extending the benefits to our customers means less time to value, better end results, and a framework for constant improvement. React is a beautiful accelerant for the dreamer.
Cassy Lueneburg