1 / 51

Building with Sencha & Touch Higher Standards

Presented at: Nextbridge LHR C1 May 10, 2012. Building with Sencha & Touch Higher Standards. Sencha Framework & Best Practices. Questions regarding previous session?. ?. RECAPE. We need platform?. PhoneGap. PhoneGap Api Reference. What is missing?. User Experience. Here comes?.

arvid
Download Presentation

Building with Sencha & Touch Higher Standards

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. Presented at: Nextbridge LHR C1 May 10, 2012 Building with Sencha & Touch Higher Standards Sencha Framework & Best Practices

  2. Questions regarding previous session? ?

  3. RECAPE

  4. We need platform? PhoneGap

  5. PhoneGapApi Reference

  6. What is missing? User Experience

  7. Here comes? Mobile UI Libraries

  8. A lot of things available

  9. Framework? Choice Is all Yours

  10. Its all up to you? Choose Which fits you?

  11. Today’s AGENDA

  12. Topics we will cover in this presentation PART 1 Sencha Touch Application Demonstration in Sencha Touch

  13. Topics we will cover in this presentation PART 2 • Best Practices for Mobile Development • Things to remember • Best Practices in Mobile Development

  14. Sencha Touch Framework Topic 1

  15. Overview Sencha Touch Intro Core Features Components Containers Layouts Hello World App Application Demonstration

  16. Sencha Touch Intro • High performance HTML5 mobile application framework with world-class user experiences. • Build fast and impressive apps that work on iOS, Android, BlackBerry and more. • Over 50 built-in components • Very easy to learn • License Options • free commercial & open source licenses for application development. • paid commercial license for OEM uses. • Current Version 2.0.1

  17. Core Features • Built-in MVC system • Rich collection of components • Layouts • Config System • Animations & Touch events • Device Profiles • Native Packaging • Android & IOS currently • Sencha Command (included Sencha Touch SDK) • Sencha Touch Charts • Rich Documentation (30 guides, 6 full example apps included, API docs, Component examples, Guides, Videos etc)

  18. Components Most of the visual classes you interact with in Sencha Touch are Components. Every Component in Sencha Touch is a subclass of Component. Components are grouped into four categories

  19. Components • Navigation components • Toolbar • Button • TitleBar • SegmentedButton • Title • Spacer • Form components • Panel • FieldSet • Checkbox • Hidden • Slider • Text • Picker • Date

  20. Components • Store-bound components • DataView • Carousel • List • NestedList • General components • Panel • TabPanel • Viewport • Img • Map • Audio • Video • Sheet • ActionSheet • MessageBox

  21. Containers • A Container has all of the abilities of Component, but lets you nest other Components inside it. • Most apps have a single top-level Container called a Viewport. • Containers give the following extra functionality • Adding child Components at instantiation and run time • Removing child Components • Specifying a layout

  22. Layouts • Layouts describes how components are placed (arrangement/positioning) inside containers. • HBox • VBox • Card • Fit

  23. Hello World <!DOCTYPE HTML> <html> <head> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="css/sencha-touch.css" /> <script type="text/javascript" src="js/sencha-touch-all.js"></script> </head> <body> <script type="text/javascript"> Ext.setup({ onReady: function() { var panel = Ext.create('Ext.Panel', { html: ‘Hello World' }); Ext.Viewport.add(panel); } }); </script> </body> </html>

  24. Application Demonstration in Sencha Touch Topic 2

  25. Application Demonstration Store Finder Kitchen Sink (comes with Sencha Touch)

  26. Questions ?

  27. Best practices in mobile development

  28. Things to remember Topic 3

  29. 1. Things to remember

  30. 1. Things to remember Alice in Wonderland

  31. 1. Things to remember: Alice in Wonderland

  32. 2. Things to remember MOBILE Don’t

  33. Best Practices in Mobile Development Topic 4

  34. 3. Things to remember Do not blindly mimic designs intended to run on desktop devices

  35. 4. Things to remember Revise courses of OOP Avoid procedural Programming

  36. Avoid procedural Programming What if you have to manage 100 items linked on multiple places?

  37. Avoid procedural Programming You will think of

  38. Avoid procedural Programming You will think of

  39. 4. Things to remember Revise courses of OS Avoid Synchronous approach for some cases

  40. Avoid parallel programming What if you have to process the search meanwhile offer user to navigate to some features

  41. Avoid parallel programming If you think in JS

  42. 5. Things to remember Revise courses of OOAD Use OOP Design Patterns

  43. Design Patterns

  44. Design Patterns: How to use?

  45. 6. Things to remember Use data compression during transfer

  46. 7. Things to remember Use Local Storage but carefully

  47. 8. Things to remember Provide Auto Sign In functionality

  48. 9. Things to remember Avoid heavy usage of Keypad

  49. 10. Things to remember Always Respect User & User Experience

  50. Now its your turn to speak

More Related