Make Your Mark With Frevvo, Literally.

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.

Screen Shot 2015-07-07 at 9.54.13 AM

Sign up now for a free trial account to try using this feature. You can find step by step instructions here. Make your mark with frevvo live forms today!

Reacting to React

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.

Here is what XHP looks like:

<?php
if ($_POST['name']) {
?>
    <span>Hello, <?=$_POST['name']?>.</span>
<?php
} else {
?>
    <form method="post">
    What is your name?<br>
    <input type="text" name="name">
    <input type="submit">
    </form>
<?php
}

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.

ditaa-b0ba6bda71b2f0d371adc1b633b075ac

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):

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

And here is what JSX compiles to:

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

Here is an example of composing multiple view components (note that composition is done using just Javascript: no hidden complexities or framework magic):

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'https://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

React.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

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.

Generate Federal W4 PDF

Businesses often need to generate specific PDFs e.g. a Government W4 for a new employee or a Medical Insurance form for health insurance. Typically, this is a tedious, manual process. Unless you are managing this through frevvo.

frevvo makes this simple for all! With PDF generation many forms, like the W4 tax form, can be uploaded into your workflows. Ultimately creating a fast and accurate approval process. PDF Generation ensures no fields are left blank, no errors, and it is mobile friendly. frevvo allows for a natural and user friendly experience anywhere, including smart phones and tablets.

Get rid of bad data, duplications, and anything else that could and probably will go wrong working with a PDF. frevvo makes it simple, accurate, and reliable for your employees and customers. Once you create your online forms they will work on any device and you will still be able to instantly generate PDFs you need to fulfill business requirements.

To generate pixel perfect PDFs you must follow a few simple steps. An entire step by step walk through created by frevvo for importing pixel perfect PDFs can be found here.

W4Acroform

The benefit of this feature is that once the acroform is uploaded to your workflow in frevvo it can be mapped. This means you can configure it so that fields in your frevvo workflow will auto fill in your printable W4 form.

This is easy. Trust me. It is much like building any frevvo form with the drag and drop feature. If at any point it becomes confusing and/or difficult, visit frevvo docs, or you can reach out to our great team at support@frevvo.com. 

Now, your employees and customers can get a great user experience on the device of their choice while still allowing you to run your business and meet requirements and regulations.

If you are new customer needing the Generate Federal W4 PDF feature, or a current customer wanting to try it, we recommend it for everyone.

Mobile web is the architecture of choice for Enterprise Mobility

Key Business FunctionalityEnterprises continue to build custom apps in 2015 to meet their business needs. Without question, one of those needs is enterprise mobility. 43% of respondents cited mobility (mobile web or apps) as a top business functionality or process critical for apps in 2015 (source: Outsystems/Techvalidate State of Application Development Survey) nearly triple the next highest item.

Customers, partners and employees want to interact with organizations anytime, anywhere and from any device for things like placing orders, approving purchases etc. But the number of devices, platforms and languages has exploded to the point where it’s impossible for even a large enterprise IT organization to keep up. What to do?

When building mobile apps, enterprises can choose between hybrid, mobile web and native architectures. Native has advantagesMobile Architectures like the best overall user experience and the ability to fully leverage device functionality. The problem is the explosion in platforms, screen sizes, devices and the sheer cost of building and supporting custom native apps for so many of them. It’s no wonder that 60+% of IT departments are turning to mobile web or hybrid technology for their business needs. Just 26% of enterprises intend to build native apps.

Makes sense to us. It’s exactly what we’re seeing as our customers automate their everyday approval processes like purchase requisitions, sales orders and expense reports. They’re nearly always custom and nearly always work better if they have access to critical data sitting in existing legacy systems. They always need to work on mobile devices so approvals can happen anytime and anywhere.

And yes! They’re definitely using mobile web-based apps to deploy these automated processes.

Packaged SaaS apps are not meeting enterprise needs in 2015

Despite the plethora of packaged SaaS apps available today for everything from CRM to Expense Reports, many enterprises continue to build their own custom apps in 2015. This according to an April 2015 survey of IT decision makers by Outsystems & TechValidate.
Top Apps Enterprise Plan to build in 2015The top apps are:

  • Process Automation (forms/routing)
  • Analytics
  • Executive Dashboards
  • CRM (to our surprise)

Clearly, enterprises are not getting what they need from packaged SaaS apps.

A key reason that we see in our customers is that automated processes simply aren’t as useful unless they integrate with critical data sitting in existing internal systems. For example, a Sales Order approval workflow just works better if it’s integrated with customer data. Purchase Requisitions & Leave Approvals are much more useful if they can access employee information sitting in existing HR systems.

Organizations Integrate with 1-5 existing systemsAs a result, organizations find themselves doing significant integration with existing systems to create useful custom apps. Almost 80% of them need to integrate with at least 1-5 cloud-based apps and > 60% need to integrate with packaged or custom-developed on-premise apps. That’s a lot of integration and you just can’t get that with packaged SaaS apps.

No wonder enterprises are turning to alternatives that help them rapidly and cost-effectively create custom apps that work on mobile devices, automate their forms and approval processes while still enabling integration with existing systems. It just adds up.

Why Hybrid Cloud?

According to IDC, more than 65% of enterprise IT organizations will commit to hybrid cloud technologies before 2016. IDC defines hybrid as the integration of an internal IT system with private or public cloud services.Hybrid Cloud

We see our customers taking a similar approach. Why? The reality is that today’s typical organization (small, medium or large) has existing business systems – the so-called legacy investments. They contain really important information like customer data that takes time to transition to cloud (if it’s transitioned at all). That’s where hybrid cloud comes in.

Incremental Approach
Hybrid Cloud allows CIOs to take a pragmatic step-by-step approach. Clearly, it makes sense for new projects to use Cloud where possible. The benefits – particularly when it comes to speed and agility – are too great to ignore. But cloud-based projects/apps are less useful if they can’t access information in those pesky legacy systems. The obvious solution is integration a.k.a. Hybrid Cloud. For example, our customers integrate from frevvo’s public cloud to their internal LDAP systems for authentication. They’re deploying cloud-based forms and approval workflows that work with existing SQL databases. A new project like automating an internal purchase requisition approval can be done quickly without great development expense in the cloud while still using critical data that’s sitting in existing systems. That’s just smart.

The company starts realizing benefits in weeks rather than gains that won’t materialize for 5 years.

Senseless Vendor Policies
Recently, we got a nasty surprise from Salesforce – access to our data using their API is metered and extremely limited.

We have to pay a fee to Salesforce just so we can access OUR DATA.

That’s ridiculous. No wonder customers want to control their data and deploy hybrid cloud strategies. The benefits of Cloud IaaS are flowing to Salesforce not customers.

Multiple Cloud Apps
No matter what Oracle says, the reality for most organizations is that no single Cloud vendor will provide every service they need. An obvious requirement then is to integrate data/applications between clouds. Sounds like Hybrid Cloud to us.

Persistent Security Worries
Unfortunately, customers are leery of cloud security. While many of these concerns are unfounded and are based on misconceptions, it’s not easy to let go of your critical data. After all, that’s what makes your business your business. Hybrid cloud allows you to take a staggered approach and keep your data where you’re comfortable managing it while still deploying modern apps that reap the benefits of increased productivity and agility.

The role of the CIO and the IT department continues to change towards brokering services rather than building systems. Cloud simply doesn’t happen overnight and, meanwhile, CIOs must manage existing systems that run the business today. Hybrid cloud allows them to take a sensible incremental approach to re-shape the existing infrastructure over time while still delivering real business benefits in a timely manner.

frevvo, the 411.

What is frevvo

frevvo creates easy-to-use, cloud-based software for mobile web forms and approval workflows that are easy to customize, work on all devices and solve real business problems. Together with our partners, we have helped over 400 customers increase productivity and reduce costs.

Our customers vary in what they use our product for. frevvo can be used to create many many different things. An example of how simple a workflow can be:

Hood County

The education field has even benefited from using frevvo.

Why choose frevvo?

Built-in mobile 24/7 access that can be reached on computers, smartphones, and tablets. frevvo is a cloud based product that offers public or private cloud options for flexible deployment. Enterprise ready and built for business to make work easy with signatures, PDF, XML and more included! Easy form builder allows anyone to be able to use. frevvo is business user friendly with its amazing drag-and-drop form builder.

Read more on frevvo including all the features and benefits of document approval process, cloud based workflows, forms, and why frevvo is the best choice for all of the above.

Don’t worry you don’t have to be a computer tech to use frevvo. If frevvo is going to make your life easier then sign up now. (FREE 30 day trial). If at any point you are struggling you can view simple step by step tutorials for building workflows, forms, and or database connector. You can even join frevvo webinars!

Need additional help? Reach out to our great support team support@frevvo.com. Any further questions feel free to call frevvo at +1.203.208.3117

Follow frevvo on Twitter

Follow

Get every new post delivered to your Inbox.

Join 55 other followers