building with sencha & touch higher standards
DESCRIPTION
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?. - PowerPoint PPT PresentationTRANSCRIPT
Building with Sencha & Touch Higher StandardsSencha Framework & Best Practices
Presented at:Nextbridge LHR C1May 10, 2012
Questions regarding previous session?
?
RECAPE
We need platform?
PhoneGap
PhoneGap Api Reference
What is missing?
User Experience
Here comes?
Mobile UI Libraries
A lot of things available
jQuery Mobile jQTouch
iUI Choclate Chip
Framework?
Choice Is all Yours
Its all up to you?
ChooseWhich fits you?
AGENDAToday’s
Topics we will cover in this presentation
• Sencha Touch• Application Demonstration in Sencha
Touch
PART 1
Topics we will cover in this presentation
• Best Practices for Mobile Development– Things to remember– Best Practices in Mobile Development
PART 2
TOPIC 1Sencha Touch Framework
Overview
• Sencha Touch Intro• Core Features• Components• Containers• Layouts• Hello World App• Application Demonstration
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
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)
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
Components
• Navigation components– Toolbar– Button– TitleBar– SegmentedButton– Title– Spacer
• Form components– Panel– FieldSet– Checkbox– Hidden– Slider– Text– Picker– Date
Components
• Store-bound components• DataView• Carousel• List• NestedList
• General components• Panel• TabPanel• Viewport• Img• Map• Audio• Video• Sheet• ActionSheet• MessageBox
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
Layouts
• Layouts describes how components are placed (arrangement/positioning) inside containers.– HBox – VBox– Card– Fit
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>
TOPIC 2Application Demonstration in Sencha Touch
Application Demonstration
• Store Finder • Kitchen Sink (comes with Sencha Touch)
Questions
?
BEST PRACTICES IN MOBILE DEVELOPMENT
TOPIC 3Things to remember
1. Things to remember
1. Things to remember
Alice in Wonderland
1. Things to remember: Alice in Wonderland
To be a Mobile
Developer
Be Explorativ
e
Accept New
things
Ready for
uncertain events
Be Social
2. Things to remember
Don’t have Quad Core
Don’t have Gigz RAM
Don’t have Tera
Memory
Don’t have an easy replacement
MOBILE Don’t
TOPIC 4Best Practices in Mobile Development
3. Things to remember
Do not blindly mimic designs intended to run on desktop devices
4. Things to remember
Revise courses of OOP
Avoid procedural
Programming
Avoid procedural Programming
What if you have to manage 100 items linked on multiple places?
Avoid procedural Programming
You will think of Pointers
Procedural with Arrays OOP with Data Structures
Avoid procedural Programming
You will think of Pointers
Procedural with Arrays OOP with Data Structures
4. Things to remember
Revise courses of OSAvoid
Synchronous approach
for some cases
Avoid parallel programming
What if you have to process the search meanwhile offer user to
navigate to some features
Avoid parallel programming
If you think in JSRemote Calls
Synchronous AJAX
5. Things to remember
Revise courses of OOAD
Use OOP Design Patterns
Design Patterns
OOAD
Functor
WrapperSingletonIteratorObservers
Factory
…..
Design Patterns: How to use?
•Application SettingsSingletone•Call for Web servicesAdapter•Mimic Application server sideWrapper•User interaction with dataObservers•Displaying List DataIterators•……….…..
6. Things to remember
Use data compression
during transfer
7. Things to remember
Use Local Storage but carefully
8. Things to remember
Provide Auto Sign In functionality
9. Things to remember
Avoid heavy usage of Keypad
10. Things to remember
Always Respect
User &
User Experience
Now its your turn to speak
BUILDING WITH SENCHA & TOUCH HIGHER STANDARDS
Sencha Framework & Best Practices
Designed & Presented by:Nazar HussainTraining Manager
Co-Presenter:
Muhammad AzeemSenior Software Engineer
Presented at:Nextbridge LHR C1May 10, 2012