App Framework – Bridging the hybrid performance gap.

App Framework – Bridging the hybrid performance gap.
Ian Maffett – Intel Software Engineer
July 9, 2014
DevCon5
Overview
 Intel and HTML5
 Common problems with HTML5 on mobile
 How App Framework fixes these
 App Framework 2.2
 The Future
2
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Why Intel loves HTML5
• Enable more developers to create applications
• Offering performance solutions across the vertical stack
• X86 chips for Android/Win 8.1
• Android optimizations
• Crosswalk runtime
• XDK Cross platform tools
• Intel App Framework
3
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Intel XDK – HTML5 tools
4
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
HTML5 Mobile Performance issues
•
Mobile devices do not have the power or memory of
desktop computers.
•
Each OS has its own set of bugs.
•
Iterative markup is slow to render and hard to interact
with.
•
Animations are generally poor.
•
Does not always replicate a native experience.
5
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Intel’s App Framework
6
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
App Framework – a JavaScript library for creating mobile and hybrid
applications
• Query Selector library for easy DOM manipulation
• UI framework providing crisp animations and smooth
scrolling.
• Plugins your application and share with the community.
• All written in HTML, CSS and JavaScript
7
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
UI Performance
Mimic a native experience for iOS, Android, BB10 and
Win8/WP8.
 Fixed headers and footers with a scrolling content area.
 Smooth JavaScript scrolling (native on iOS5+ and
Blackberry10).
 Crisp animations with CSS3 transforms.
 Vector icons that scale with your app.
 Easily customizable, so your app can look any way you
want.
8
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Low barrier for developers
Write plain HTML and App Framework UI provides
1. Animated page transitions
2. Scrolling
3. Fixes for OS Specific bugs
Add some JavaScript for
1. Business Logic
2. DOM Interaction
9
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Quick App Framework UI code demo
and XDK Demo
10
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
App Starter
Drag and drop builder to prototype an App Framework
application.
Stub out your pages, headers, footers, and other elements.
Round trip support- you can bring in an existing App Starter
app and re-edit UI.
You can import an existing App Framework application and
add new elements.
DEMO
of App Starter
11
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Common OS bugs fixed
iOS
Android
• 300ms click
delay
• Prevent
page from
bouncing
with native
scrolling
• Translate3d
and form
elements
• Scrolling
performance
• UI Animations
Windows
• Event dispatch
bug with
addEventListen
er
• “touch” events
supported.
• Hide
address bar
12
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Using jQuery
You can use App Framework UI with jQuery to tap into the jQuery
plugin resources.
Include the build/ui/af.jquery.ui.(min).js file into your project after
including jQuery 2.x
Bridge plugin is included in the file.
13
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Using other tools
• Require.js – simple, just make sure you shim App Framework
UI properly
• Backbone – binding view events for inline headers/footers do
not work, so proceed with caution. Otherwise code away!
• Angular – this is tricky, but use directives and manually call App
Framework UI’s API’s
• “Controllers” can map to panels – bind load/unload panel
events to connect to controllers
• “Directives” handle other events (like tap/click) on elements
14
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
App Framework 2.2
App Framework 2.2 beta coming soon
Firefox OS theme (finalized)
Toast Plugin
Single Touch plugin (guarantees only one touch event is
happening on an element)
15
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
App Framework
Use App Framework for responsive, performant mobile
apps. Combine that with the Intel® XDK to make your app
development easy and consistent for all platforms.
http://app-framework-software.intel.com
[email protected]
http://www.github.com/01org/appframework
16
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.
Legal Disclaimer & Optimization Notice
INFORMATION IN THIS DOCUMENT IS PROVIDED “AS IS”. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL
OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. INTEL
ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY,
RELATING TO THIS INFORMATION INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A
PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER
INTELLECTUAL PROPERTY RIGHT.
Software and workloads used in performance tests may have been optimized for performance only on Intel
microprocessors. Performance tests, such as SYSmark and MobileMark, are measured using specific computer
systems, components, software, operations and functions. Any change to any of those factors may cause the results to
vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated
purchases, including the performance of that product when combined with other products.
Copyright © 2014, Intel Corporation. All rights reserved. Intel, Pentium, Xeon, Xeon Phi, Core, VTune, Cilk, and the Intel
logo are trademarks of Intel Corporation in the U.S. and other countries.
Optimization Notice
Intel’s compilers may or may not optimize to the same degree for non-Intel microprocessors for optimizations that are
not unique to Intel microprocessors. These optimizations include SSE2, SSE3, and SSSE3 instruction sets and other
optimizations. Intel does not guarantee the availability, functionality, or effectiveness of any optimization on
microprocessors not manufactured by Intel. Microprocessor-dependent optimizations in this product are intended for
use with Intel microprocessors. Certain optimizations not specific to Intel microarchitecture are reserved for Intel
microprocessors. Please refer to the applicable product User and Reference Guides for more information regarding the
specific instruction sets covered by this notice.
Notice revision #20110804
17
Optimization Notice
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.

Download Report