HTML5 - Sencha for Flex

uglyveinInternet and Web Development

Jun 24, 2012 (6 years and 24 days ago)


Table of Contents
The Sencha frameworks: Ext JS 2
and Sencha Touch
Class System 3
Standard Library 4
Components 8
CSS and Sass 9
Summary 9
Sencha’s professional frameworks — Ext JS for desktop applications and Sencha
Touch for mobile apps — have evolved over the past five years to provide a solid
foundation for rich application development using HTML5 and web standards.
For Flex developers, Sencha frameworks provide a familiar component and
class model similar to the one they already know, giving them a fast track to
delivering great application experiences with HTML5. This paper highlights
the aspects of Sencha frameworks that make it easy for Flex developers to
adopt Sencha technology and quickly develop HTML5-based applications.
Flex developers have the opportunity to be a dominant force in the new
market for HTML5 applications. When combined with Sencha frameworks
and tools, existing Flex knowledge and skills can be easily applied to
HTML5 application architecture and application development.
The technologies that make up the HTML5 family of standards introduce significant
improvements in the quality and capability of web applications running in a
browser. Many of the defects and limitations of the browser as an application
runtime are addressed by HTML5 to enable developers to build reliable, larger
scale, cross-browser applications. HTML5 by itself, however, does not meet
all professional developers’ requirements. The reality is that frameworks are
essential to abstract away inconsistencies in browser implementations and
make software development productive. Sencha frameworks do just that to
provide an enterprise-grade HTML5 application development experience.
The key difference between Flex and Sencha frameworks lies in the interpreted
nature of web development and the runtime in which the code executes. As a
compiled medium, Flex provides a development model with support for classes,
components, and declarative component instantiation in MXML. The Flex compiled
bytecode, SWF, runs in Flash Player. Sencha frameworks are interpreted and
provide support for classes, components, and declarative component instantiation
via xtype. Sencha frameworks are optimized for both desktop (Ext JS) and
mobile (Sencha Touch) browser runtime environments . Given that Flex is a
compiled medium and Sencha is interpreted, the syntax for these approaches is
quite different, and moving from one to the other requires domain knowledge.
Sencha for Flex
The Sencha frameworks: Ext JS and Sencha Touch
Ext JS provides a complete framework for building desktop
applications with cross-browser compatibility across modern
browsers. While Ext JS shares its foundation with Sencha Touch, its
components are designed to support desktop browser clients.
Sencha Touch provides a complete framework for building mobile applications
with cross-browser compatibility across smartphones and tablets.
Sencha Touch is designed to create apps that work with modern phone
browsers — most notably WebKit, which ships on most mobile devices
— and operating systems, such as iOS, Android, and Blackberry OS.
Applications written with Sencha frameworks run in the browser, and
they utilize the JavaScript programming language. JavaScript is flexible
and ubiquitous on desktop and mobile browsers, and is the common
underpinning of all web applications. Sencha frameworks augment
JavaScript, adding a class-based architecture. When combined with
the Sencha frameworks’ class architecture, JavaScript becomes similar
in capability to ActionScript in terms of core features, with additional
advantages provided by support for mixins and dynamic class loading.
Class System
At the core of Sencha frameworks is an object oriented class architecture that
provides support for inheritance, mixins, and class loading. The combination
of JavaScript and the class architecture provides a professional foundation
for software developers to construct large-scale projects and in many regards
is very similar to benefits at the heart of Adobe Flex and ActionScript.
Here is the code to define a new class using the Ext.define api:
While this syntax does not use the JavaScript prototype inheritance syntax,
it has benefits in being loadable with dependency support. Here is the
code to create an instance of the above class using the Ext.create api:
These features enable the structure and extensibility that professional developers
expect both within components and within the model-view-controller (MVC)
implementation built into both Ext JS and Touch. The class architecture is used
throughout the frameworks to allow classes to be easily extended. Developers
can also use the class system to define their own classes. Here is an example
showing how to extend the prior class (note the use of the extends API):
The Class system supports the pattern of using a JavaScript object to
configure a component during instantiation. Given that all component
constructors support a single object argument, the frameworks make
creating many components all at once easy with xtype, discussed below.
Standard Library
Sencha frameworks include a mature standard library that codifies common
tasks for application development. The standard library contains extensions
to the base JavaScript types that provide static methods to enhance array,
object, date, and others. There is also a set of classes for fast cross-browser
DOM manipulation, searching, and measurement. The frameworks also provide
classes for type conversion and internationalization as well as prebuilt and tested
classes for just about every application purpose. Here are a few examples:
Sencha frameworks provide a set of core developer affordances that simplify
common development problems like instantiating components, managing
events, data access, loading views remotely, and implementing a clean
MVC pattern in applications. Sencha frameworks also provide a set of
manager classes that allow developers to control how the framework handles
events, tasks, components, focus, scrolling, windowing, and models.
Model Classes describe the data structures within an application and facilitate data
typing, validating data, and form processing. Here is an example model class:
Typically, data within JSON and XML arrives untyped; models convert
data to the target types during loading. Additionally, models make
creating new data records from form values easy and handle data
validation and type conversion automatically or custom via events.
Stores provide data loading, storage and are very similar to Flex
DataProvider classes. Each store has a model that is used to type
convert data when it is loaded. Here is an example store class:
In Flex, MXML provides an XML-based declarative format for
component composition. Similarly the Sencha xtype format uses
JavaScript object literals to encapsulate structured data representing
user interfaces. Here is a example xtype that defines a form:
Within any container component, simply setting the “items” property to an xtype
object literal will create all components defined in the object. The name xtype
is derived from the property “xtype” that denotes the type of each component.
The class system API allows the developer to register components with a
custom xtype value and extend xtype rendering with custom components as
needed. While similar to MXML, xtype is not compiled and is easily loaded
remotely, letting a developer easily create server-side dynamic user interfaces .
Sencha frameworks provide a rich set of events and a standard architecture for
listening to events. Typically events are configured using the listeners object.
Here is an xtype example of a Text component with a listener for change:
Events provide data depending on the event type used and simplify
reacting to event data. Events support bubbling with an API for
managing propagation. Sencha Touch also adds support for touch-
based gestures making detection of pinch, zoom, swipe, and other
user interactions very simple across mobile operating systems.
Sencha frameworks also support an optional integrated model-view-
controller implementation. MVC support enables developers to build
larger scale applications, and it’s especially useful when different parts
of an application are developed by different members of the team. The
MVC implementation builds on top of the class architecture and uses a
simple folder structure to organize models, views, and controllers.
Sencha frameworks provide components for building applications that target either
mobile or desktop browsers. Each component is implemented as a class and can
be used directly and extended easily. Each component has a designated xtype
value and can be instantiated via Ext.create or using the xtype object format.
The frameworks provide a set of containers with programmatic layout
to organize the user interface of your application. Containers support
layout behavior, including “hbox” and “vbox,” and let developers use
programmatic layout rather than depending on pure HTML. Here
is an example of a container layout implementing an hbox:
Supported layout behaviors are assigned as a property of the container,
similar to Flex 4 layout behaviors. In addition, every container supports an
“html” property allowing the assignment of raw HTML markup which lets you
designate a CSS class to customize the style of the container’s contents.
The benefits of this approach are that components handle the coarse layout
and fidelity can be achieved with small amounts of HTML and CSS.
CSS and Sass
Each component within Sencha frameworks is styled with CSS. Sencha
provides Sass ( templates to make generating
custom framework styles programmatic. For example, a developer
can change the “base-color” variable, and the entire application
will reflect the new color including highlights and shadows.
HTML5 is clearly the future of web application development. If you’re a
Flex developer, Sencha frameworks can give you a fast track to HTML5.
You can use existing skills and a familiar approach to build HTML 5-based
applications that take advantage of the ubiquity of the browser—without
compilation. Whatever platform you target – the desktop or mobile
devices – Sencha provides a professional-level development experience
that makes it faster to build robust applications based on JavaScript.
Sencha makes application frameworks that equip developers to create,
deploy, and optimize compelling experiences using web-standard
technologies. The company’s flagship products, Ext JS and Sencha
Touch, are cross-browser JavaScript frameworks which produce rich
internet applications for desktop and mobile devices. More than one million
developers worldwide—representing more than 150,000 companies—use
the Sencha family of products to build amazing applications every day.
1700 Seaport Boulevard
Suite 120
Redwood City, CA 94063
1 888 736 2421
Copyright © 2012 Sencha