Presented at Adobe Max by Aaron Conran Overview of Sencha Frameworks and Tooling Shows how to use the Sencha Designer to build HTML5 Apps

1. 1
Sencha
Rapidly Build HTML5
Apps for Any Device

2. Amazing Experiences On Every
Device
Wide browser support Extensible architecture
Pixel-perfect fidelity Native deployment
Rich theming & styling Rapid development tools
Native behavior and widgetsSupporting cloud services
2

3. Browsers and OS’s
Safari 3+
Firefox 3.6+
Internet Explorer 6+
Chrome 6+
Opera 10.5+
3

4. Phones and OS’s
4

5. Tablets
iPad
Xoom Galaxy Tab
Playbook TouchPad
5

6. Development
Frameworks
Tools
6

7. Who am I?
Aaron Conran Developed parts of:
Lead Engineer of Sencha Designer - Ext JS
Twitter: @aconran - Sencha Touch
Email: aaron@sencha.com - Sencha Designer
Involved with Sencha (formerly Ext) since 2006
7

8. Rich Web Apps
• Single Page Applications
• Native like experience in
browser
• Data-centric applications
8

9. Sencha Touch: HTML5 Made
• Cross-browser normalization
• Multi-pane scrolling
• Fixed-position UI Chrome
• Data models
• Animations
• Styling and theming
• Gestural abstractions
• Full deck of UI components
• Offline storage proxy
9

10. Sencha Desktop
‣ Complete application frameworks
‣ Components, events, lifecycles
‣ Pixel-perfect, cross-browser
‣ Java and JavaScript Options
‣ Ext JS and Ext GWT
10

11. Designer • Rapid interface builder
• Windows, Mac OS, Linux
11

12. Hands-on Demos
12

13. Border Layout
• Mail Client layout
• Multiple Pane Resizable
• Uses Tree and Grid
component
13

14. Login Window
• Window
• Form Fields
• Docked Toolbar
14

15. Complex Forms
• Form Panel
• Fieldsets
• Multi column forms
15

16. Product Browser
• Master Detail View
• Layouts
• Grid
• Templates
16

17. Features
• Promotes Object Oriented
Design
• Generates Best Practices Source
Code
• Save to Toolbox
17

18. Community
18

19. 19

20. The leading HTML5 development
community
1.2M+ developers worldwide
First to market with HTML5 on mobile
Wide Enterprise application footprint
19

21. Sencha EcoSystem
‣ 1.2 million desktop & mobile developers, worldwide
‣ 240,000 registered community members
‣ 150,000 downloads per month
‣ Licensed by over 25% of the Fortune 100
20

22. Strong Developer Focus
21

23. Additional Tooling
22

24. SDK Tools
• Themes
• Deployment
23

25. Native: Fragmented Platforms
iOS Android RIM OS HP WebOS
Objective C Java Java, Flash & Web Web
Cocoa Android SDK WebWorks Mono
Multiple languages, simulators, versions and
capabilities
App store submission policies, approval delays, platform longevity,
changing policies
24

26. Native Shells Bridge HTML5
Author HTML5 app but bridge to device APIs
and deploy via App Stores
25

27. Sencha Animator
Plug-in-free animations
for rich-media ads that
run on any mobile ad
Full CSS3 support, including
animations, 2D and 3D
transformations, backgrounds,
borders, font effects, and more,
as well as ORMMA support.
26

28. Thank You
27

29. Links
28

30. Links
Sencha
http://www.sencha.com
Slides
http://www.slideshare.net/
Demo Code
http://www.github.com/aconran/designerdemos/
29