Presentation is loading. Please wait.

Presentation is loading. Please wait.

Mobile Web Apps IT University 4 Nov. 2013 Troels Parbst.

Similar presentations

Presentation on theme: "Mobile Web Apps IT University 4 Nov. 2013 Troels Parbst."— Presentation transcript:

1 Mobile Web Apps IT University 4 Nov. 2013 Troels Parbst

2 Established 1999 Locations in Copenhagen, Aarhus, Aalborg og Warsaw About 250 employees (2011) About 320 employees (2012) 420 employees (oct. 2013) Netcompany 2 At være Danmarks største og foretrukne leverandør af forretningskritiske it-projekter med leveranceansvar. Our business is line-of-business applications, portals and system integration using technology and standards primarily for.NET and J2EE

3 Troels Parbst Cand.scient in Computer Science, DIKU Senior consultant in Netcompany (2½ years) Been working in telcos for about 6 years Whos talking? 3

4 Section 1 – Why do mobile – Different solutions and taxonomy – Choose an approach Section 2 – Expensive native apps – Mobile browsers – The hybrid app Agenda 4

5 Mobile Web Section 1 5

6 Why our customers cannot ignore mobile Why is mobile important? 6 Source: Google, 2012 Users expect and reward a good experience Most users think mobile-friendly sites are important. All of these users encountered sites that were not mobile-friendly (so they know the difference) Most users are more likely to revisit mobile-friendly sites Many users are more likely to buy or convert after visiting a mobile-friendly site … and punish a bad experience Many users will leave a non-mobile-friendly site, without buying. Over half of the users said a frustrating experience on a (mobile) website would hurt the perception of the brand.

7 Why is mobile important? 7 Annual number of smartphones shipped (in millions) 494 million in 2011, 712 million in 2012!

8 Mobile solutions 8 What is this Mobile Web? The Mobile Web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone, a feature phone or a tablet computer, connected to a mobile network or other wireless network. Wikipedia

9 9 Mobile solutions Responsive design Facilitated by the CSS3 Media Queries Module Specified styles are applied given certain conditions Conditions are composed of ANDs, ORs and presentation feature tests Window width/height, device width/height, orientation, ratios Simple but powerful! Combined with careful HTML structure yields a many-in-one solution

10 10 Mobile solutions Responsive design example WebTablet Smartphone The rest is default HTML document flow, no JavaScript!

11 11 Mobile solutions Web app as dedicated mobile web site A component based approach using HTML, JavaScript and CSS Adapted for a single device type e.g. iPhone

12 12 Mobile solutions General Web app Visual expression is identical on all platforms

13 13 Mobile solutions Full blown App store app Presence in the app store with search and ranking Device access Camera Files Compass And so on… Notifications Services (on Android) Utilize the device hardware to its full extend

14 14 Mobile app taxonomy For one playform only. Code and environment bound to platform. Native app A Web app wrapped as a native app. Hybrid app Website that looks like and behaves more like an app than a website, fx transitions and navigation. Web app Website customized for one platform, fx iPhone or Android. Fx transitions and navigation. Dedicated mobile website Website adapted for varying screen sizes. General mobile website

15 15 Choosing an approach What the customer needs Functional or design requirements might dictate the approach Price is a huge factor, most mobile for the money How well an app sits with the existing channels. Do the customer have skills to support the engagement? Time to market Working smart and offering competitive prices Development time, including design, building and testing Developer skills. Front-end developer or app specialist

16 16 Comparing approaches NativeWeb GraphicsNativeHTML, Canvas, SVG UI performanceFastSlow Look and feelNativeEmulated DistributionApp storeWeb Device accessYesNo Swipe, pinchYesNot pinch ConnectivityRuns offlineMust be online Required skillsSpecific to OSWeb technologies

17 Hybrid apps Section 2 17

18 Native app frameworks 18 Silverlight XNA WPF XAML Device API WinRT API WinJS & HTML Azure Notification Service Xcode Objective C Vertical frameworks UI Notifications Java Android UI Programming model 15 > API versions Support Library Notifications

19 One dedicated UI thread Non-responsive apps are killed OS has license to kill any app at any time Event driven MV* applications Asynchronous behavior Notification service Vendor frameworks have varying degrees of freedom – Power consumption – Runtime control – Security Native framework similarities 19

20 …compared to the browser 20 A single-page JavaScript application has Environment comparable with native platforms Threads Asynchronous behavior Event based interaction While reaping the benefits of standards Cross-platform code Well known technologies Using web technologies for their originally intended purpose

21 Mobile OS distribution 21

22 Mobile browsers 22

23 Layout engine in Chrome, Safari, Android, BlackBerry Tablet, BADA and webOS GNU open source project with contributers from Apple, Google, Nokia, RIM and more. About 40% marked share on handheld devices in July 2012 Estimated 50% marked share by the end of 2012 More users than Trident (IE) and Gecko (FF) as of September 2013 Mobile browsers 23 WebKit

24 Why is that important? Homogeneity. Consistent capabilities and features CSS3 support varies a lot in HTML5 browsers, but webkit has many implements of the –webkit vendor specific property Support like no other browser. For instance remote debugging of the browser running on the device in Safari and Chrome Webkit browsers 24

25 WebKit implements fancy CSS3 Fonts Text effects Borders and boxes (round corners) Gradients and opacity Transitions and animations Webkit browsers 25

26 WebKit has rich HTML5 support Web Storage (client side SQLite) File API Server-sent events WebSockets (permanent HTTP connection to server) Web Workers (long running scripts) GeoLocation Audio and Video tags Offline web applications Canvas element Webkit browsers 26

27 What will the WebKit platform (probably) never do? Web app limitations 27 Demanding, leading edge applications e.g. games

28 What is missing from WebKit as mobile platform? Device access features not supported by the browser – Notification – Compass – Camera – Contacts – Files – System events Native packaging is missing – App store infrastructure Need an intermediate layer to access the host platform! Web app limitations 28

29 29 The hybrid app Source:

30 Device access and native wrapping Apache Cordova / PhoneGap Appcellerator Titanium Nimblekit Rhodes (RoR server on the phone) Device access 30

31 Cordova / PhoneGap 31 Has plugin structure where any native feature can be reached Can embed into existing application

32 Basic PhoneGap app 32 A WebView packaged as a native app! … and nothing else

33 Choosing framework for adding chrome and abstraction to an app Many contenders. Potentially every app framework for JS with touch support Selection criteria presentation layer: HTML or JavaScript UI Bindings: key for reducing boilerplate code Bar to entry Composed Views: component reuse. Framework thoroughness Provides app structure Supports other browsers than webkit Web app framework 33

34 Web app framework 34 Presentation layer UI BindingsBar to entryComposed views Provides app structure Support > WebKit Sencha Touch JavaScriptYesHighYes No jQuery mobile HTMLKind ofMediumDo it yourself Kind ofYes Dojo Mobile HTMLKind ofMediumDo it yourself Yes DHTMLX Touch JavascriptYesHighNoYesFirefox SproutCoreNoneYesMediumYes Firefox iUIHTMLNoLowNo XUINoneNoLowNoYes

35 Sencha Touch 35 iOS like Components Animations Layout abstractions Unified event model (true MVC / MVVM) Touch events Data package with web storage Charts App structure

36 Taps into the other jQuery ongoings Supports every browser Community jQuery Mobile 36

37 37 Hybrid app criticism Limited to what graphics the browser can produce Games and animations will meet hard limits Android sucks Entry level phones run Gingerbred and have low memory Hardware undersized for top browser performance Only Chrome utilizes the GPU, default browser never will The F-word: fragmentation Vendors dont update and screw up the browser with good ideas Javascript No explicit resource management for memory and cycles Libraries seldom minded for single page apps (fixed with the next reload) Tooling Power consumption What about the developer skills? Same same but different More complex apps: more architecture, more testing, more PoC code

38 Price vs. user experience vs. flexibility Easy to have an opinion on an app Customers expect the best from an app Level expectations with expenditure In some regards, only ½ the work The simpler the more likely Code still has to make exceptions for the each platform. Visual expression is identical unless two designs are made Compared to an average portal project An app is (just) a fancy front-end Things like integrations and secutity are often harder to provide Apps are often secondary to a regular website 38 Experiences

39 If you think youve got a consultant hidden in you and youre considering to let him out Keep Netcompany in mind! Many of us start right after finishing the Masters degree Great place to learn and develop your skills! Awarded Denmarks best IT consultancy 4 times by Børsen 2005-2012 Awarded Denmarks best consultancy by Computerworld 2007 Awarded Dynamic CRM Partner of the Year and Information Worker Partner of the Year (MOSS platform) by Microsoft Denmark 2009 Microsoft awarded Dynamic CRM partner of the year, Best customer satisfaction of the year and Azure Partner of the year by Microsoft Denmark 2010 Awarded Cloud Platforms Partner of the year and Portal and Collaboration Partner of the year by Microsoft Denmark 2011 CRM and Cloud Platform Partner of the year by Microsoft 2012 Winner of Highest Impact BI solution award @ European SP conference 2013 Supplier of the year @ TDC (TAK-prisen) 2013 39 Netcompany

40 40 ? Questions

Download ppt "Mobile Web Apps IT University 4 Nov. 2013 Troels Parbst."

Similar presentations

Ads by Google