1 / 40

Mobile Web Apps

Mobile Web Apps. IT University 4 Nov. 2013 Troels Parbst. Netcompany. ”At være Danmarks største og foretrukne leverandør af forretningskritiske it-projekter med leveranceansvar .”. Established 1999 Locations in Copenhagen, Aarhus, Aalborg og Warsaw About 250 employees (2011)

arien
Download Presentation

Mobile Web Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. Agenda Section 1 • Why do mobile • Different solutions and taxonomy • Choose an approach Section 2 • Expensivenativeapps • Mobile browsers • The hybrid app

  5. Section 1 Mobile Web

  6. Why is mobile important? Whyourcustomerscannotignore mobile Users expect and reward a goodexperience • Most usersthinkmobile-friendly sites areimportant. All of theseusersencountered sites thatwere not mobile-friendly(so theyknow the difference) • Most usersare more likely to revisit mobile-friendly sites • Manyusersare more likely to buy or convertaftervisiting a mobile-friendly site … and punish a bad experience • Manyuserswillleave a non-mobile-friendly site, withoutbuying. • Over half of the userssaid a frustratingexperience on a (mobile) website wouldhurt the perception of the brand. Source: Google, 2012

  7. Why is mobile important? Annualnumber of smartphonesshipped (in millions) 494 million in 2011, 712 million in 2012!

  8. Mobile solutions 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. Mobile solutions • Responsive design • Facilitated by the CSS3 Media QueriesModule • Specifiedstylesareapplied given certainconditions • Conditionsarecomposed of ANDs, ORs and presentation feature tests • Windowwidth/height, devicewidth/height, orientation, ratios • Simple but powerful! • Combined with careful HTML structureyields a many-in-one solution

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

  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. Mobile solutions • General Web app • Visual expressionis identical on all platforms

  13. Mobile solutions • Full blownApp 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 it’sfullextend

  14. Mobile apptaxonomy

  15. Choosing an approach • What the customerneeds • Functional or design requirementsmightdictate the approach • Price is a huge factor, most mobile for the money • How well an appsits with the existingchannels. Do the customer have skills to support the engagement? • Time to market • Working smart and offeringcompetitiveprices • Development time, including design, building and testing • Developer skills. Front-end developer or app specialist

  16. Comparing approaches

  17. Section 2 Hybrid apps

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

  19. Native frameworksimilarities • One dedicated UI thread • Non-responsiveappsarekilled • OS has license to killanyapp at any time • Event driven MV* applications • Asynchronous behavior • Notification service • Vendorframeworks have varyingdegrees of freedom • Power consumption • Runtime control • Security

  20. …compared to the browser 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

  22. Mobile browsers

  23. Mobile browsers WebKit • 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

  24. Webkit browsers 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

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

  26. Webkit browsers 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

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

  28. Web applimitations 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!

  29. The hybrid app Source: brightcove.com

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

  31. Cordova / PhoneGap • Has pluginstructurewhereanynative feature canbereached • Can embedintoexistingapplication

  32. Basic PhoneGap app A WebViewpackaged as a nativeapp! … and nothingelse

  33. Web appframework 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

  34. Web appframework

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

  36. jQuery Mobile • Taps into the other jQueryongoings • Supports every browser • Community

  37. Hybrid appcriticism • Limited to whatgraphics the browser canproduce • Games and animations willmeethard limits • Android sucks • Entrylevelphones run Gingerbred and have lowmemory • Hardware undersized for top browser performance • Only Chrome utilizes the GPU, default browser never will • The F-word: fragmentation • Vendorsdon’tupdate and screw up the browser with ”goodideas” • Javascript • No explicitresource management for memory and cycles • Libraries seldom minded for single page apps (fixed with the nextreload) • Tooling • Power consumption • What about the developer skills? • Same same but different • More complex apps: more architecture, more testing, more PoCcode

  38. Experiences 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 identicalunlesstwodesigns are made Comparedto an average portal project • An app is (just) a fancy front-end • Things like integrations and secutityareoftenharderto provide • Appsareoftensecondaryto a regular website

  39. Netcompany If youthinkyou’vegot a consultanthidden in youand you’reconsidering to let him out Keep Netcompany in mind! • Many of us start right afterfinishing the Masters degree • Great place to learn and developyourskills! • Awarded Denmark’s best IT consultancy 4 times by “Børsen” 2005-2012 • Awarded Denmark’s 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

  40. Questions ?

More Related