We frequently accommodate new features for our customers. We here at frevvo are all about accessibility and a user friendly experience, for not only our employees and customers, but yours as well!

One of our real estate customers had created a very in-depth workflow. This screen flow had many sections to it. Our great team created a “Save on Navigate” feature for our customer. Due to this long workflow, it was necessary to have a feature to be able to save. If something happened where there was a power outage, or an emergency, etc and your customer/employee had to leave immediately without finishing this flow, they would have to start COMPLETELY over. …until now.

Selecting save on navigate allows you to continue from the last page you have previously completed, the next time you log in. You can find this workflow in your task list. Imagine working on a 30+ page workflow and being on page 28 when it shuts down. Now you are starting back on page one. Take a deep breath. You won’t ever experience this!

In your business this will be very beneficial for workflows such as employee on boarding, or anything that requires many steps in a flow. We take pride in creating a user friendly experience and you should too.

Makes business processes running the cloud far more effective by integrating with important data in internal business systems such as HR systems, databases and authentication systems.

Helps get past persistent security worries and regulatory concerns.

It’s a pragmatic and sensible approach, which is why it’s popular. We’re seeing the same thing in our customer base and expect the trend to continue. They see automating their everyday approval workflows on mobile devices as critical to business agility. It’s easy to customize with frevvo’s drag & drop Designers, deploy in frevvo’s Cloud (public or private) while still providing access to important data.

Over 90% of businesses are using cloud computing and it does appear to be delivering on its promise with an astounding 74% saying that it provides them with a competitive advantage. Survey after survey (such as this one from Harvard Business Review Analytic Services) claims that:

Business Agility is the leading driver for Cloud Computing.

Unfortunately, business agility is hard to pin down – roughly speaking it’s the ability for your business to react rapidly to changing business conditions. How does cloud help? We think of two main aspects:

Responsiveness – Enable employees to do the right thing at the right time. That means reducing business complexity (stop wasting time on paperwork, errors, missing signatures etc.), employee efficiency (let them work anytime, anywhere and using any device) and collaboration (access to people and information from anywhere as needed).

New Opportunities – Faster rollout of new business initiatives as business conditions change e.g. introduce a new product offering or modify internal processes to quickly satisfy changed customer demands even something as simple as letting people buy on their mobile phone.

Both are sources of significant competitive advantage. According to HBR, companies are already seeing business value and benefits from simplification, collaboration, and faster reactions to new opportunities. All aspects of agility powered by cloud + mobile.

That agility appears to lead to some very tangible and measurable outcomes: cloud enthusiasts (those further along in their deployments than their counterparts) are more likely to have entered a new market in the past three years (49%) i.e. rolled out business initiatives quickly to take advantage of a new business opportunity or to have been part of a merger or acquisition (49%). Significant majorities believe cloud (+ mobile) reduces business complexity (71%), increases employee productivity (69%) and responsiveness to customers (53%).

Business agility is about both speed and doing the right thing at the right time. Cloud is a key enabler of all these aspects of agility.

What is Business Agility?

It’s hard to define. Wikipedia’s article acknowledges that it has multiple issues. We’ll define it as the ability to react in a timely manner to changing business conditions. That could mean any number of things such as responding to customer complaints on social media or quickly creating new offerings to take advantage of the latest hot trend.

In many cases, this means giving your employees the ability to take the right action at the right time. Whether they’re at work in the office or on the road traveling to a meeting. At their desk or on the train.

That means automating and mobile-enabling everyday processes like purchase approvals, sales orders, trouble tickets and so on. These are routine day-to-day activities that employees spend a significant portion of their day on. They’re unique to your organization and it’s difficult to find pre-packaged applications that meet your exact needs. It’s no surprise that process automation (forms, routing) is the #1 app enterprises plan to build in 2015.

Cloud computing is an essential enabler. AWS and its kin allow any business to support millions of users. Incredibly cheap storage solutions from Dropbox, Microsoft and others let you access your data from anywhere on any device.

And that’s exactly where frevvo comes in. With the drag & drop designer, easily create your own custom forms and automated approval workflows. They’ll just work automatically on any device from smart phones to tablets to desktop computers. Public, private or hybrid cloud options make fast, flexible and affordable deployment possible.

Creating workflows and PDFs online with frevvo Live Forms is a piece of cake. (Try an example now.) It’s simple with frevvo’s easy-to-use drag & drop designer, but don’t you want to make it yours? Businesses generally need or want to have their company logo on legal documentation. The latest version of frevvo makes this possible with the PDF snapshots and custom header and footer feature.

You can now upload your logo image and configure the form/workflow so that it will be displayed on every page of the PDF print view. You can also generate page numbers, dates and times, set page margins and whatever else you may need for your documents. This allows for a great user friendly experience while still meeting business requirements with a one shot deal.

You must have heard all the buzz around React and more recently around React Native. Open-sourced by Facebook, they bring an alternative design to an already crowded web development ecosystem. They could also be an interesting addition to frevvo’s technology stack so let’s take a closer look.

React’s direct precursor originated in Facebook’s Ads organization as a custom version of PHP, called XHP. XHP helped minimize Cross Site Scripting (XSS) attacks by extending PHP with an embedded XML syntax so that programmers wouldn’t have to manually scrub data when generating markup. The embedded HTML markup was then desugared into plain PHP calls to construct markup programmatically. For better or worse, this meant that no external template engine was needed: it was all done in PHP. In many ways this is no different than what ECMAScript for XML (E4X) tried years back for Javascript (and was dropped for good reasons), except it was in PHP and proprietary to Facebook.

And it didn’t take long before the idea of porting this XHP to Javascript came along. After all, dealing with dynamic UIs and the continuous rount-trips to the server are clearly a problem for Facebook. So this was the start of React: an API for creating DOM nodes and a custom JSX syntax for embedding XML in Javascript.

As an aside, what is the difference between JSX and E4X? Basically, JSX is just syntactic sugar and translates XML syntax into function calls. On the other hand, E4X was tied to a specific and internal representation that had to be converted to and from to interact with the rest of the app. E4X was also closer to XML whereas JSX is closer to Javascript. One example is the difference in namespace handling: in E4X every XML element had a namespace, like XML. JSX, on the other hand, uses Javascript to deal with namespaces i.e. each node is represented by a unique string across your program and you have all of Javascript features (functions, variables, closures, etc) at your disposal to use and reuse these views.

Fine, JSX is a better version of E4X, but that is not the most interesting aspect of React. The interesting bit is the Virtual DOM. Everyone knows that manipulating DOM nodes is expensive, should be minimized and properly ordered to avoid un-necessary layout recalculations. The Virtual DOM avoid these problems by constructing a Javascript intermediate representation for the whole UI that is completely detached from the DOM. It is React’s responsibility to compare this Virtual DOM to the actual browser DOM and compute a minimum set of updates needed. React calls this step the Reconciliation. These updates are then batched, pruned, ordered, and executed in one shot in specific intervals. Although comparing the difference between two trees is known to have O(n3) complexity, React was able to reduce this complexity to O(n) based on specific heuristics. The end result is a fast and less error prone solution.

React Reconciliation

One consequence of React’s design is that the components generating markup can be truly stateless. They take new data as inputs, generate a new Virtual DOM as the output, and the UI is efficiently updated. In essence this is not much different than how a 3D engine game loop works. If you want to undo a change, just re-render the UI using the previous version of the data and React will make sure that the DOM is updated accordingly.

Here is an example of what a React component looks like (assume you can replace JSX markup with plain Javascript calls, if that is not your thing or want to avoid an increase in tool-chain complexity):

Since the Virtual DOM is nothing more than an efficient browser DOM abstraction, it wouldn’t be complete without a way to handle dynamic DOM events. Here, React provides a full set of synthetic HTML5 events on top of the DOM events. React components will interact with these synthetic events and the runtime will efficiently adapt the DOM event registration, firing, and bubbling under the covers. This also means that React also runs on older browsers such as IE8 without any problems: the Virtual DOM adapts the older event model into the synthetic one.

React, however, is not a full Javascript UI framework. From an Model-View-Controller (MVC) perspective it corresponds to the view layer and the unit of abstraction is the React component, which is nothing more than plain-old Javascript objects that can be rendered based on a set of inputs. There is no external template engine since Javascript is your engine constrained only by JSX or the Virtual DOM APIs (or, in other words, as constrained as a dynamically typed language can be here). Components can be developed in isolation and composed into composite views.

There are other interesting and obvious benefits of this design. For example, it is possible to test the UI on the server with node.js or even Java’s embedded Javascript engine and without the need for clunky solutions such as PhantomJS (this a specially interesting propery since frevvo renders PDFs on the server). Since the HTML5 markup can be completely generated on the server you can also cache the initial HTML. Users will have a nicer experience since the UI will be rendered very quickly and as soon as the UI Javascript is loaded by the browser, it will diff the existing DOM and just attach the event handlers assuming the initial data didn’t change. Even, if the initial data did change, things will work as expected. Finally, it is also possible to render to SVG, VML and Canvas.

In general, React provides a good power-to-weight ratio since it keeps the API surface simple and flexible by reusing Javascript while it removes many of the complexities from the programmer without sacrificing performance for most cases. As a bonus, it also enables additional server side processing that is quite important for frevvo specially with respect to caching and PDF generation. There are plenty of resources out there with many more details, but one you could start with is this by Pete Hunt.

In a following post, I will take a look at React Native and how it can potentially enable a more cost effective and sane solution for supporting multiple native mobile platforms, specially for smaller companies.