by John Browne, on Nov 10, 2015 6:24:26 PM
Today I'm excited to tell you about the newest release of WebMAP (ie WebMAP3), with support for the popular AngularJS framework and Bootstrap for styling.
When we first built WebMAP last year, we were committed to creating single page applications with modern architectural patterns. We knew many of our customers wanted to take Windows (.NET) applications and quickly realize those applications as web apps. For that reason, after carefully examining the available alternatives, we decided to make our first implementation support KendoUI from Telerik. KendoUI gave us a strong JavaScript MVVM (model view viewmodel) pattern on the client side and supported many familiar controls with a look and feel similar to Windows.
While the reception to our initial release has exceeded our expectations, we've had a steady stream of interest in a version of WebMAP2 that supported AngularJS in addition to KendoUI. According to Libscore Angular is used by over 9000 sites out of 1 million tested, including NBC, Walgreens, Intel, Sprint, and more. The best part about this release is that it has already been used on a real customer who had 1M lines of .NET code they wanted to move to the web. After a year of work it's ready for you.
Combining AngularJS with Bootstrap
The design philosophy of Angular nicely matches the architectural philosphy of WebMAP, which is to make sure the business logic of an application is cleanly separated from its presentation. While this makes prototyping faster, this really isn't much of a concern for our customers, because the tool is designed to migrate an existing application from .NET to the Web. However, the overall MVC pattern (and MVVM on the client) makes unit testing much simpler as well as expediting the task of creating clients which can be tuned to different devices or form factors.
To support the Angular framework we have elected to add support for Bootstrap, which provides an easy way to get CSS stylings that are quite contemporary, a responsive design that works well regardless of form factor (scales well from a laptop to a tablet to a smartphone), and has lots of cool JavaScript eyecandy like Alerts and Carousels to make your Web app look like something designed from the get-go for the Web, not for Windows. And since it's all HTML5, you can be comfortable that it will run perfectly on Chrome, Edge, IE, Firefox, Safari, even Opera. No NSAPI plugins, no binary runtimes, just code based on open standards like HTML, CSS, and JavaScript. You'l find we use BootstrapUI for those elements that make sense to have delegates assigned to them, and "normal" Bootstrap for everything else.
How to choose
How do you choose between KendoUI and Angular/Bootstrap? It depends on what your goal is:
Web-enablement
If you are primarily looking to create a modern-looking Web app that works well on any browser, regardless of form factor, and your users are either more open to change or even demanding it, then you should target Angular and Bootstrap. Your resulting app will look like a Web app written from scratch, and it will have responsive design build in to look good on any form factor, from PCs or MacBooks to smart phones. This is a great option for an ISV who is porting a customer-facing app to the Web.
Simplify deployment without disrupting users
If, on the other hand, you have lots of existing Windows users of your .NET app, and they are users who are familiar with the existing look and feel of the desktop version--in effect users you don't want to retrain--then the KendoUI target may be a preferred choice. The resulting Web app will resemble closely the original Windows forms and controls. A frequent case for this scenario is the big organization with a line-of-business application. Your users will be able to "install" the app by just clicking on a browser link; any updates you do will automatically be adopted with no need to push out installs to your user base; employees can access the application from any device with a browser. Of course, Kendo doesn't by default include a responsive design, so it's great for rich forms-based apps that are normally accessed on devices with larger screen real estate, not smart phones.
How to do it
How do you get your app to migrate to Angular? Like Kendo, you begin by creating a new solution on studio.mobilize.net (of course you have to get a free account first if you haven't done that).
WebMAP3 will download and run a small assessment tool on your application that will collect some metadata (not code) and tell you how suitable your app is for an automated migration to the Web. (Note - call us at 425-609-8458 if WebMAP indicates your app isn't ready to migrate. It's highly likely we can help!) Once you've done that, you can choose to migrate your app--notice in the top right of the assessment results page there's a drop down to pick your framework:
That's all there is to it: just pick "AngularJS" from the drop down and click "Migrate."
What do you think?
We look forward to getting your thoughts about our implementation and how interesting the framework is to you as a target. Our WebMAP3 team has put in some monster hours to get this finished so that you can enjoy yet more rich ways to move your legacy applications to the Web.
