Article. One for All Apps in HTML5

Transcription

1 One for All Apps The boom of smartphones and tablets in the consumer sector creates new problems for developers of industrial Apps: They have to build Apps quickly that run on any type of smartphone and that deliver the same level of comfort to all users. Until now, this cost a tremendous amount of effort and money. One solution for this problem is platform independent app development using HTML5. The modern world of Software becomes more and more complex and difficult to manage. There are different target platforms, such as Smartphones, Tablets and desktop PCs as well as different operating systems like ios, Android and Windows. The market research institute Gartner forecasts that the operating system Android will overtake Windows on all devices within the next three years. This also means that the plurality of operating systems and platforms will continue to increase in the coming years. Furthermore, the multi-touch control of mobile devices has fundamentally changed the concept of user interaction, which has increased the requirements for application designers. Last, but not least, more and more users in the private sector take the usage and the comfort of mobile devices for granted. Thus, they expect to have the same user experience in their everyday work environment. Where to go from here Page 1 of 5

2 Before developers can get started on industrial Apps, they have to evaluate whether a native, a web or a hybrid solution is suitable for the use case or application at hand. Both, the web as well as the hybrid App make use of HTML5 (Hypertext Markup Language) for its structure, the programming language CSS for the layout of its user interface and JavaScript for the underlying business logic and interactions. For the development of native Apps, on the other hand, developers will utilize the programming language, libraries (SDKs) and development environments suggested and provided by the creators of each operating system. For example, Apple uses the programming language Objective-C and the development environment Xcode in combination with their ios Software Development Kit to create native ios Apps. The development of such an App has to be done on a Mac. Afterwards, the App will be made available in Apples own proprietary online store. If an application is required to run natively on more than one platform, developers have to learn each set of development tools and regulations of the respective manufacturer, which leads to more overhead and increasing costs. Searching for a compromise Developing platform independent web and hybrid Apps using HTML5 can help to overcome this issue. The former of both solutions runs in a browser on the targeted platform. When the program is run for the first time, it will load from a remote server on the internet. Unlike native Apps, web based Apps only have limited access to hardware of a mobile device. Additionally, the code of these Apps has to be interpreted by browsers, which could lead to a decrease in overall performance. User experience, such as the visual presentation and design of user interface elements or interactions, may also suffer from the unification across various platforms. Each browser is based on different rendering and JavaScript engines, which, practically speaking, leads to varying levels of support for HTML5 elements and JavaScript code. Hybrid Apps solve several of these problems. Such Apps are initially developed using HTML5, but distributed as native Apps in the end. Injecting native code into the App afterwards exposes almost all hardware functionality of a platform to the App. Just like native Apps, distributing hybrid Apps is done via the respective online store of the targeted platforms. Developing made easy HTML5 uses CSS and JavaScript and makes an important contribution to the effort of improving user interfaces for each device type while keeping development costs down. HTML5 introduces new elements, each of which covers a specific functionality, to the description language in order to support mobile devices. Its predecessor HTML 4 was based mostly on static elements for desktop browsers. With HTML5, however, mobility and user interactions move into the foreground. For example, it is now possible to track a user s location by using the Geolocation element. New video and audio elements will help software developers to embed videos and music, which all platforms can play back, into their websites. Another element called Application Cache makes it possible to store data locally on mobile devices. This allows Apps to run even without an internet connection. HTML5 also defines new elements, which allow tasks to run on the client-side that previously had to be processed on the server-side. The Web Worker element, as another example, makes it possible to start a separate process in the background. The main process can communicate with the background process through a messaging mechanism. Furthermore, Responsive Web Design (RWD) allows user interfaces to adapt to varying form factors across different devices. RWD can read Page 2 of 5

3 out a mobile device s aspect ratio, resolution and screen orientation. This allows developers to provide a fitting design of the user interface. Developers can use these HTML5 features to build cross platform web and hybrid Apps. Different web browser will then render those Apps on different device types. Browser vendors are tightly involved in the quick further development of the HTML5 standard. A number of we b and hybrid Apps that have been released are already difficult to differentiate from native Apps. Sorting the toolbox Various development tools or libraries for cross-platform programming of web and hybrid Apps differ in levels of quality and support. A multitude of JavaScript extensions exist that provide specific features. Knockout.js, for example, is a JavaScript library that makes it possible to use the Model-View-Controller (MVC) pattern within JavaScript. The MVC pattern makes it easier to make changes later on and reuse components of an application. However, some feature rich JavaScript libraries, such as jquery Mobile, can be used to create consistent uniform Apps for any given platform. This is made possible through UI-Elements such as buttons and toolbars that developers can customize and style using CSS. Some companies like Sencha provide complete IDEs (Integrated Development Environment) that have additional comfort features that make development even easier. These features include functionalities such as user interface designer, HTML, JavaScript, CSS editors, emulators to test applications, debugging, and helper functions to prepare Apps for distribution. Furthermore, some companies offer services to port a web App to a native one by making it a hybrid App. Those development environments also provide the necessary libraries that make it possible to gain access to a platform s hardware. PhoneGap, for example, offers a cloud service, which developers can use to transform a web App into a native app. Today, a variety of different development frameworks and toolkits on the market make it possible to create cross-platform Apps. Some of these development tools and libraries are built on top of each other. The license cost, source code maintainability, debugging support and learnability of each development tool and library are important selection criteria. All companies work intensively on improving their tools to solve some of the problems described above. Looking into the crystal ball According to Gartner s market analysts, Apple, Android and Microsoft will dominate the operating system market. Companies will likely continue to develop native application for each target platform, because it allows them to leverage the full potential of the respective mobile devices. This includes the layout and interaction concept, which can be specifically adapted to each device. However, use cases that exceed the requirements of the consumer sector will increase the pressure on the industry to develop platform independent applications. All browser vendors continue to improve of HTML5 support. This makes HTML the standard for web application in the future. Libraries and frameworks for the development of cross-platform Apps will continue to mature. Currently, the number of platform independent Apps in the industry is considerably small. Nevertheless, HTML5 is already a proper solution for many applications today. Page 3 of 5

4 Author: Michael Reiß Software Product Manager, Consultant This article was published in the following magazine: iee 04/2013 Page 4 of 5

5 Company Profile M&M M&M Software stands for innovation, competency and quality. Being 25 years in business, M&M has gained the reputation as a reliable partner for many renowned customers worldwide. Our vast industry know-how is reflected in a wide range of innovative and unique software solutions that we have developed for and together with our customers in the factory- and process automation, maritime technology, mechanical engineering, building automation and energy technology. M&M is the competent service provider for all matters concerning software products in the industrial automation. Our service portfolio includes Management & Technology Consulting, Software Development, Quality Assurance, IT Operations & Services and Software Maintenance & Support. We mainly focus on solutions for Human Machine Interfaces (HMI), device integration, engineering systems and web applications. The company s headquarter is in St. Georgen in s Black Forest region. Our subsidiary in Suzhou near Shanghai/China was established in There we do not only serve the upcoming markets in Asia, but also offer offshore development services to our customers in Europe and America in proven M&M quality to significant price advantages. At the end of 2012 M&M established its subsidiary in Hanover. This location enables us to serve our customers in the north of even better. Your contact person for this press release: Kenan Sengün Tel.: Fax.: [email protected] Page 5 of 5