Visually Designing and Developing Apps for a Multi Device World

Covers the problems of supporting multiple platforms, how HTML5 can help, introduces Sencha's frameworks and tools, and discusses deployment options.

Transcript

1. Daniel Gallo Sales Engineer Visually Designing and Developing Apps for a Multi Device World
2. Who am I? • Daniel Gallo (@DanielJGallo)! • Technical Sales Engineer at Sencha! • Based in the UK! • Using Sencha’s frameworks since 2009! • Joined Sencha in February 2012! • Background in web app development (ASP.NET C#)
3. What I’ll be talking about • The problem of supporting multiple platforms and how HTML5 and Sencha can help! • Introduction to Sencha’s tools and frameworks! • Produce an app that works on mobile, tablet and desktop! • Discuss deployment options
4. Current Problem
5. End Users and Developers • Same app functionality everywhere! • Experiences tailored for desktop, mobile and tablet Developers End Users Consumers are demanding a universal app experience Developers are facing challenges building universal apps • Apps need to run everywhere! ! • Apps need to be managed on disparate platforms
6. More Platforms
7. The Solution
8. HTML5 Highest common denominator
9. HTML5 • Highest platform reach! • Most longevity! • Best future proofing! • Most code re-use across any platform! • Debug apps using common web tools Highest common denominator
10. Sencha The Company
11. Sencha’s Mission Rapid and easy development of rich web apps ! for the broadest range of devices! from IE6 to the latest tablet.
12. Multi-device HTML5 Development • Cross platform deployment! • High quality user experiences! • Increased developer productivity! • Mobile, tablet and desktop We get the best HTML5 capabilities with cross-platform support, and we complete projects 50% faster. “ ”PegaSystems
13. Key Stats Over 2,000,000 developers worldwide Over 7,200,000 product downloads Over 500,000 community forum members Over 40 worldwide service partners
14. Sencha Products and Services
15. Products and Services Design Sencha Architect Develop Sencha Ext JS Sencha Touch Sencha GXT Deploy Sencha Mobile Packager Support Technical Support Training Professional Services Sencha Space
16. Where We Fit In Sencha Touch - Mobile and Tablet Sencha Ext JS and Sencha GXT - Desktop and Tablet Internet / Intranet Database
 Server SQL Server Oracle Sybase MySQL ... Application Server Java PHP ColdFusion .NET Ruby on Rails ... Web 
 Server IIS Apache Tomcat Websphere ... JSON/XML Transport Layer
17. Everything You Need, Plus More… form resizer html editor buffered grid grid row editor scatter chart menu tab panel line chart validation combo box bar chart checkbox toolbar tree controller button window tooltip date field animation spinner radar chart time field gauge chart model draw grid json store slider field set pie chart number field xml store data association ajax proxy jsonp proxy localstorage proxy rest proxy tree store grid grouping color picker panel stateful tree drag drop message box image text metrics right-to-left
18. Frameworks
19. Sencha Ext JS • MVC architecture! • Robust data APIs! • Modern themes! • Rich UI widgets! • Plugin-free charting! • Big data grids! • Cross platform browser compatibility
20. Sencha Touch • High performance mobile application framework! • Cross platform apps! • Themes for each platform! • Smooth scrolling and animations! • Multi-touch gestures! • Adaptive layouts
21. Tools
22. Sencha Architect • Visual app builder for desktop and mobile! • Generate live interfaces! • Build UI and code fully featured apps directly in Architect! • Connect to backends easily! • Best practices generated code
23. Sencha Architect • Works well with distributed version control systems such as Git! • Easy project navigation with Tabs and Quick Open! • Small memory footprint, along with fast project loading and saving, making it suitable for large projects
24. Example App
25. Example App: Expense System • SQL Server database ! • Web services built using ASP.NET Web API! - RESTful services. Able to make use of GET, POST, PUT, DELETE request methods for managing data! - Security to control access to data! • Sencha Touch and Sencha Ext JS for front-end
26. Example App: Expense System Sencha Touch - Mobile and Tablet Sencha Ext JS - Desktop Intranet Database
 Server SQL Server Application Server .NET (C#) Web 
 Server IIS JSON Transport Layer
27. Example App: Expense System
28. Deployment Options
29. Deployment Options • Deployed as a web app! - For example, user navigates to http://www.example-app.com! - User can then add the app to their home screen! • Packaged in a native wrapper! - A full screen web view inside of a native app that loads your web app! - Can be submitted to app stores! - Could use PhoneGap, PhoneGap Build, Sencha Mobile Packager! • Mobile application management (MAM) services! - Typically used to secure apps on “bring your own” mobiles/tablets! - For example, Sencha Space
30. build.phonegap.com PhoneGap Build • Upload a Zip file containing your app or retrieve a Github project! • Private and public app! - One free private app! • Can build and download native (hybrid) apps for all major platforms! - iOS! - Android! - BlackBerry! - Windows Phone
31. Product Bundles and Pricing
32. Product Bundles and Pricing Sencha Complete Sencha Touch Bundle Sencha Architect Sencha Touch Sencha Touch Charts Sencha Touch Grid Sencha Eclipse Plugin Sencha Mobile Packaging Sencha Support Package Sencha Ext JS - Enterprise Data Connectors - Starts at $995 per seat Starts at $695 per seat
33. Questions?
34. Create amazing apps built on web standards