thinktecture • Focus on – Distributed applications, service orientation – Cloud computing – Interoperability, cross device – Pragmatic end-to-end solutions – Windows Server, ASP.NET, Web API, SignalR, WCF, Windows Azure – HTML5, JavaScript, AngularJS • Microsoft MVP for Windows Azure (Architecture) • ASP.NET Web API Advisory Board Member • http://blogs.thinktecture.com/cweyer • [email protected] • @christianweyer think mobile!
access to everything, best performance – Store deployment – Knowledge of each platform required • Even with ‘C# everywhere’ • Web – One codebase (really?) – No deployment – Browsers are operating ‘systems’ these days • Hybrid – HTML5 & JavaScript – put into a native app shell – Leverage native features through plugins • Hybrid2 – Hybrid + explicitly mix native and web elements
feel for everything – Desktop, tablet, phone – Watch out for app store requirements • Your app looks like the native platform – iOS, Android, Windows Phone • Your app looks like your app – Corporate identity – Watch out for app store requirements
client-side JavaScript programming – Separation of concerns – Data/model binding – Declarative markup via directives – Dependency injection • Leverage power of the browser (including offline storage) • Issues with mobile – Code bloating (better with Angular 1.2) – Navigation, Touch • First mobile frameworks appear which are built on AngularJS – AngularJS team itself works on mobile improvements
frameworks – E.g. Bootstrap – One codebase for all devices & form factors – Use responsive design • Optimized mobile CSS3 frameworks, e.g. – jQuery Mobile – Kendo UI Mobile – PhoneJS – ChocolateChip-UI – Ratchet – Topcoat – Lungo – Ionic
mobile apps – Not web pages • Provides one look & UX across devices – Flat design – Adjust styles to your liking • Built with LESS – Compiles to CSS • Built on AngularJS • Plethora of UI components – Available as AngularJS directives
to provide a framework & tools to create native apps from an HTML5/JS codebase – Start with wrapping your HTML5 code into native app shell – Hook into platform features & events with APIs – Extend app functionality with plugins • Latest incarnation – New base architecture – CLI tools, new APIs, new platforms – Cloud-based companion PhoneGap Build
is based on plugins – Lightweight core • Application implemented as a web page – References whatever CSS, JavaScript, images, media files, or other resources are necessary for it to run – Executes as a web view control within the native application wrapper – Interact with various device features by referencing a JS file which provides API bindings
about app (cross platform) – Specifies parameters affecting how it works (e.g. responding to orientation shifts) – Adheres to the W3C's Packaged Web App, or Widget, specification • Features – Out-of-the-box native features via JavaScript API – Need to be enabled, implemented as plugins • Plugins – Bridges bit of functionality between web view and native platform the application is running on $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
exposed via API • Customizations – Use merges directory to add or override files for specific platform • Whitelisting – Security model that controls access to outside domains – Default security policy allows access to any site – Before moving your application to production, review whitelist and declare access to specific network domains and subdomains
– Single JavaScript interface used across all platforms – Native implementations following platform-specific plugin interfaces that the JavaScript calls into • Installation via CLIs • Mapping from native implementation class to JS-exposed name in config.xml • Use cordova.exec() to communicate between the JavaScript and native environments • Android Java base class CordovaPlugin from package org.apache.cordova.plugin • iOS ObjectiveC base class CDVPlugin
and events • Integrate AngularJS into this lifecycle – Ideally, bootstrap AngularJS upon onDeviceReady • Provide AngularJS services for PhoneGap features & plugins – E.g. accelerometer: https://github.com/btford/angular- phonegap-accelerometer/blob/master/accelerometer.js
Safari Web Inspector to debug HTML5/JS code – On simulator/emulator or device – Always use console.log() • Other remote debugging tools like Weinre (local/Cloud) – E.g. http://debug.phonegap.com/
have 300ms delay for click/touch – FastClick.js • Multi-touch gestures – Hammer.js – Integration with AngularJS • Test on real devices, really – And have them “all”
mobile (or: ‚smart‘) apps • Decide about the look & feel of your app • AngularJS is a very powerful & productive client-side JS framework • Several lightweight CSS frameworks available to build lean HTML5 apps • Building hybrid apps gets easier with PhoneGap 3.x – Still a lot of work for tools and IDE builders • Typical 80/20 scenarios can be easily realized with PG – For the rest build plugins or embed PG into native apps
christianweyer
wemra
hollycummins
nakahara
satohjohn
macha64
yug1224
broadleaf
syumai
y0hgi
minodriven
koic
axbom
holman
inesmontani
jonrohan
tamaranovitovic
techseoconnect
aleyda
baasie
jacobtomlinson
ammeep
trishagee
![20 Resources • http://blogs.thinktecture.com/cweyer • [email protected] • AngularJS – http://angularjs.org/](https://files.speakerdeck.com/presentations/185902904092013121665673b0f04c4b/slide_19.jpg){kind=link}