Tag: JavaScript

Posted on

Accelerate Mobile Development with Cross-Platform Tools

Book Cover

Cross-platform tools allow developers to repurpose existing skills to accelerate native, multi-platform #mobile development.

While many of your mobile, cross-platform goals can be accomplished with HTML5, you might be wondering if there’s a solution for pure native code. There are a growing number of options out there using popular programming languages and even no code at all.

Appcelerator provides an IDE and the Titanium SDK allowing developers to create cross-platform apps using JavaScript. Unlike Hybrid apps, the JavaScript is compiled to native code for better performance. APIs are included to ensure apps can take advantage of all platform features as well as native UI elements.

If you’re a .NET shop with developers comfortable with Visual Studio and skilled in the C# programming language, Xamarin is right for you. This development tool runs on its own or plugs into Visual Studio allowing you to build native iOS, Android and OSX apps. It also implements the native UI of each platform so users will never know the apps weren’t built in Objective-C, Swift or Java. Xamarin is a great way to leverage .NET investments across devices.

Zero-code or low-code solutions like AppArchitect, Alpha Anywhere, SkyGiraffe, Force.com, PowWow, WorkSimple, PowerApps, Reddo, MobileSmith, StarMobile and others are worth your due diligence to speed up development efforts as long as they don’t create a risk to your business platforms.

Reduce expenses by building apps for all mobile platforms with a single codebase and a smaller development team to get your product to market more quickly and pervasively. Has your company pivoted to cross-platform development tools?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click here to purchase a copy of my book today and start transforming your business!

Posted on

Mobile WebViews Close the Performance Gap with Native Apps

Book Cover

New WebViews with the same performance as #mobile browsers mean #web skills are finally viable for building fast, cross-platform hybrid #apps.

Back in 2012, Mark Zuckerberg admitted Facebook’s mobile strategy relied too much on HTML5 rather than native apps. While it was a great way to target multiple platforms from a single codebase, Facebook’s hybrid app suffered from poor performance. They used a WebView which is a web browser encapsulated in a software component that can be added to a native app. This allows HTML, JavaScript and CSS to run inside a native app container with access to platform APIs that browser-based apps don’t get, like the camera or push notifications. The problem was these WebViews didn’t share all the features or performance of the full web browsers.

Today, iOS 8+ includes a WKWebView API with access to the Nitro JavaScript JIT compiler and rendering performance equivalent to the Apple Safari browser. The Chromium WebView introduced in Android 4.4 KitKat takes advantage of the Google Chrome V8 JavaScript engine for dramatic gains. On Windows 10, the WebView based on the Edge browser is the ticket. All these WebView controls offer enhanced HTML5 and CSS3 feature support and significantly better performance to close the gap with native apps. If your corporate designers and developers have web skills, consider using Apache Cordova/PhoneGap or Kaonsoft to rapidly target multiple mobile platforms with a single codebase.

Reduce development expenses by building apps for all mobile platforms with a single codebase by a smaller development team using widely-available web skills that gets your apps to market more quickly and pervasively. Does your company have a hybrid web app strategy to reach more customers faster?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click here to purchase a copy of my book today and start transforming your business!

Posted on

Give Smartphone Users Mobile Web Apps or Else!

Book Cover

Replace heavyweight, desktop focused, bandwidth eating, #Web 1.0 sites with lightweight #Mobile Web apps using responsive web design.

Just like their native counterparts, many Web 1.0 apps were built with a particular screen resolution in mind where bigger was better on an endlessly scrolling screen. As time progressed throughout the late 90s, poor performing dial-up modems running at 28.8 kb/s gave way to 56 kb/s modems, followed by 128 kb/s ISDN and then true broadband with the introduction of digital subscriber line (DSL) and cable modem technologies. Web designers kept pace with this trend by loading up web pages with heavy graphics leading to slower load times and average page sizes of 2 MB.

Web apps must be designed for mobile first. This means they must load quickly, be cached for performance and use smaller JavaScript libraries and minimal graphics. Amazon says a 100ms increase in load time equates to 1% reduction in sales. Remember, nine out of ten mobile shoppers use the mobile web while in-store and 51% of that research has led to a purchase. Follow responsive web design (RWD) principles via CSS media queries to adapt to the screen size of any device. Hide navigation menus to keep layouts simple and don’t make users pinch, zoom or pan. Google reports over 70% of consumers access websites from their mobile devices while only 20% of companies have optimized their sites for mobile. Clearly, you can increase your company’s engagement with customers and employees alike via the mobile web that’s already in their hands.

Boost user productivity and revenue by delivering a fast web site that adapts itself to the device users are carrying allowing employees to complete tasks and customers to make purchasing decisions. Is your company doing everything it can to reach mobile users?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click here to purchase a copy of my book today and start transforming your business!

Posted on

Web 1.0 Server Round-Trips are Like Watching Paint Dry

Book Cover

Replace wasteful, server round-trip #Web 1.0 sites built with Cold Fusion, CGI, ASP, Servlets, Perl and Livewire with AJAX empowered #mobile web apps.

The 90s web moved from online brochures to a technology that could be used for actual apps through the clever use of the HTTP verb called POST. A web page with text boxes, radio buttons, lists and check boxes full of data could POST information to a special web server directory containing something called a Common Gateway Interface (CGI) script. This would insert data into a database and build dynamic web pages. The notion of POSTing data and having servers do all the heavy lifting of executing code, connecting to databases and building new web pages made a lot of sense in a world of browsers with minimal capabilities. That said, users didn’t like the way their web pages disappeared and new pages were loaded and sent to their browser.

Things got a more interesting when asynchronous JavaScript and XML (AJAX) came along allowing a page to send and receive data from a server without refreshing. They just updated the page’s document object model (DOM) ushering in Web 2.0. Modern web apps use this technology to call web APIs using JSON instead of XML for data. Powerful HTML5 browsers with fast rendering plus just in time (JIT) compiled JavaScript facilitate advanced UI and JavaScript frameworks as well as the notion of single page apps. This is the web your employees want.

Deliver mobile web apps that respond quickly to user commands and behave like a native mobile apps to improve the productivity of your employees. What steps has your organization taken to boost the responsiveness of its mobile web apps?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click here to purchase a copy of my book today and start transforming your business!

Posted on

Get with the Program and Migrate those Web 1.0 Intranet Apps to HTML5

Book Cover

Migrate #Web 1.0 Intranet apps built for Netscape + #Internet Explorer 3 to HTML5, CSS3 & ECMAScript5 for modern #mobile browsers.

The web really exploded in the commercial space during the second half of the 90s. Tim Berners-Lee’s HTML 3.2 specification received W3C recommendation in 1997. Netscape submitted its JavaScript language to ECMA and got its specification published in 1998. Cascading style sheets (CSS) received their first W3C recommendation in 1996. The problem with all of this was that Netscape and Microsoft were in a browser war where both pushed their own standards on web designers and developers to try and gain an edge in the market. In an attempt to avoid incompatibilities between browsers, most websites built in the 90s targeted the lowest common denominator.

Modern mobile browsers can now render the app-like web provided by HTML5, CSS3 and ECMAScript5 (JavaScript). You get all the cross-platform development benefits plus a deployment model that bypasses app stores. This new breed of web app supports offline operation, multithreading, the ability to call web APIs and take data offline via local data stores. Most enterprise solutions require these features and Web 1.0 apps can be migrated to get this functionality.

Since existing HTML 3.2/4.0 still renders properly, just enable the new features of existing HTML tags and add new tags where appropriate. Add new JavaScript functions to empower your web app with modern capabilities. Update and add new CSS to give your web app the look and feel of a native mobile app.

Improve user productivity by delivering the feature-rich HTML5 web apps that modern, mobile browsers are designed to work with. Has your company updated all it’s Intranet web apps from the 1990s yet?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click here to purchase a copy of my book today and start transforming your business!

Posted on

Reduce Corporate Expenses by Mobile-Enabling Existing Business Systems with REST APIs

Book Cover

Mobile-enable backend business systems by wrapping them with #REST #APIs that speak the same language as any #mobile device, browser or #app.

Most backend business systems organizations have deployed over the last several decades have absolutely nothing common. They all speak different languages via myriad binary and text wire protocols. They typically don’t talk to each other and they don’t talk mobile.

This is a big problem in today’s mobile-first world because CIOs expect data from any of their backend systems to be delivered to any device, thus empowering their employees.

Companies are faced with difficult choices ranging from replacing the old systems with new, mobile-friendly ones, rewriting custom systems, upgrading to newer versions if they exist, or moving workloads to the cloud. Many companies are unable to make any of these choices for the same reason they haven’t upgraded their Windows apps from the 90s. Limited budgets.

A lower-cost alternative is to leave these working systems in place but create a RESTful API wrapper around them. You basically encircle these systems with commodity servers or cloud gateways that map proprietary APIs to mobile-friendly APIs. This mapping can be accomplished via code or through connectors or adapters. Now all your existing systems will be able to communicate bi-directionally with any mobile device and more easily interface with customers and business partners. Think of this as mobile SOA.

Reduce business expenses by extending existing workloads to mobile devices rather than replacing those workloads with new solutions. What is your company doing to empower every employee with any device?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click to purchase a copy of my book today and start transforming your business!

Posted on

HTML5 and CSS3 on Windows Phone: A Simple Boilerplate

Mobile Web on Windows Phone

Internet Explorer 9 running on Windows Phone 7.5 has seriously raised the HTML5 mobile web profile of Microsoft’s latest phone operating system.

Up until recently, it’s been all about the apps written in Silverlight.  With hardware-accelerated video, text rendering, canvas drawing, and the high-speed “Chakra” JavaScript engine, IE9 compiled for ARM processors means business.  But diving into HTML5 without considering the differences in characteristics of mobile web browsers is a mistake.  Therefore, I’m going to show you some HTML5 and CSS3 that you can use as a starting point for your mobile web apps.

Below, you can see the simplified DOCTYPE, html, charset, and stylesheet tags that are the hallmark of HTML5.  In order to be accomodate small screens on Windows Phones, I’ve added the viewport, mobile optimized, and handheld friendly tags to keep the browser from trying to render a desktop web site.

<!DOCTYPE html>

<html lang=”en”>

    <head>

        <meta charset=”utf-8″/>

        <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes”/>

        <meta name=”MobileOptimized” content=”width”/>

        <meta name=”HandheldFriendly” content=”true”/>

        <link rel=”stylesheet” href=”wp.css”>

        <title>Mobile Web Title</title>

    </head>

    <body>

           <h3>Mobile Web</h3>

           <script></script>

   </body>

</html>

You probably also noticed that I placed the script tags just before the closing body tag instead of inside the head tags.   This ensures that the mobile page fully renders in the browser before the JavaScript parsing begins.

Along with this simple HTML goes an equally simple stylesheet that provides a basic, Windows Phone Metro look and feel:

@media screen and (max-width:480px) {

body {

    font-family: “Segoe WP”,Tahoma,Geneva,Verdana;

    background-color: #000000;

    color: #ffffff;

    padding: 18px;

}

h1, h2, h3, h4, h5, h6 {

    font-family:“Segoe WP Semibold”;

    margin-bottom:7px;

}

h1 {

    font-size: 48pt;

}

h2 {

    font-size: 40pt;

}

h3 {

    font-size:32pt;

}

h4 {

    font-size:24pt;

}

h5 {

    font-size:20pt;

}

h6 {

    font-size:18pt;

}

p {

    font-size: 14pt;

}

input, select, button {

    color: #ffffff;

    background-color: #000000;

    border: 2px solid white;

    vertical-align: baseline;

    font-size: 17pt;

    min-width: 40px;

    min-height: 40px;

}

label {

    vertical-align:baseline;

    font-size:17pt;

}

input.hasfocus {

    background-color:white;

    color:black

}

fieldset, legend {

    font-family:“Segoe UI Semibold”;

    font-size:12pt;

}

fieldset {

    padding:12pt;

    border: 1px solid white;

}

}

I’ve included a simple media query in the CSS to only apply the style to devices with a maximum width of 480 pixels.  Additionally, this will definitely give you the Segoe fonts, black background, and white borders that you’re accustomed to in Windows Phone Silverlight apps.  You’ll also notice that I set minimum heights and widths for some of the UI elements to give mobile users a larger hit target.

Mobile Web on Windows Phone

Good luck with your next HTML5 + CSS3 mobile web site!

Sharing my knowledge and helping others never stops, so connect with me on my blog at https://robtiffany.com , follow me on Twitter at https://twitter.com/RobTiffany and on LinkedIn at https://www.linkedin.com/in/robtiffany