Touch Higher Standards

gatecircleMobile - Wireless

Dec 10, 2013 (3 years and 4 months ago)

55 views

Building with
Sencha

&

Touch Higher Standards

Sencha

Framework & Best Practices

Presented at:

Nextbridge

LHR C1

May 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

Sencha

Touch

DHTML
Touch

XUI

qooxdoo

Framework?

Choice

Is all Yours

Its all up to you?

Choose

Which fits you?

AGENDA

Today’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 1

Sencha

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 2

Application Demonstration in
Sencha

Touch

Application Demonstration


Store Finder


Kitchen Sink (comes with
Sencha

Touch)

Questions

?

BEST PRACTICES IN MOBILE
DEVELOPMENT

TOPIC 3

Things 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
Explorative

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 4

Best 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 OS

Avoid
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 JS

Remote Calls

Synchronous

AJAX

5. Things to remember

Revise courses of OOAD

Use OOP Design Patterns

Design Patterns

OOAD

Functor

Wrapper

Singleton

Iterator

Observers

Factory

…..

Design Patterns: How to use?


Application Settings

Singletone


Call for Web services

Adapter


Mimic Application server side

Wrapper


User interaction with data

Observers


Displaying List Data

Iterators


……….

…..

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

Hussain

Training Manager


Co
-
Presenter:

Muhammad
Azeem

Senior Software Engineer




Presented at:

Nextbridge

LHR C1

May 10, 2012