2. What is HTML?
• HyperText Markup Language (HTML) is
the main markup language for
creating web pages and other
information that can be displayed in
a web browser.
• HTML is written in the form of elements
consisting of tags enclosed in angle
brackets (like <html>), within the web
page content.
• The purpose of a web browser is to read
the HTML documents and compose
them into visible or audible web pages.
The browser does not display the HTML
tags, but uses the tags to interpret the
content of the page.
3. What is HTML5?
Enhances HTML with native
support for latest multimedia and
graphics
Leverages standards-based tools
Consumes HTML4, XHTML and
DOM
Compatible with JavaScript & CSS3
Contains JS APIs for complex web
applications
Runs on smartphones and tablet
browsers
Compatible
Produces cross-channel web apps
4. FEATURES
Canvas
Screen controls and animation
Graphics/Medi
a
Native media types
(Including audio/video)
Offline Storage
Store data locally
File/Hardware
Access
OS Integration
5. HTML5 Flavors
• Basic HTML
Application is all HTML, server
side apps
• Hybrid (Wrapper)
Run inside a native
container, and leverage the
device browser engine (but not
the browser) to render the
HTML and process the JS locally
• Mixed-Mode
Version of native application
where some forms are
rendered in the web view while
others are rendered using the
native SDK
• SPA – Single Page Application
Native app experience in a
browser (Kony method)
8. The Hype & The Promise
• Development Advantages
No specialized skillset
Single code base
Backwards compatibility
Easy to update / upgrade
Cross channel and OS
Faster time to market
• Business Advantages
No commercial app stores
Connect and reach more users
Designed with mobile in mind
Cost effective
8
9. HTML5 Has It’s Own Challenges
“The biggest strategic mistake we
made as a company was betting too
much on HTML5 as opposed to native.”
Mark Zuckerberg
“We have definitely shifted from HTML5 to native. The primary reason for that is, we’re
seeing that more and more people are spending more time in the app, and the app is
running out of memory. The second reason we’ve gone native is trying to get some of
the animations, that smoothness, we felt like we needed native to really do that well.”
Kiran Prasad, Senior Director for Mobile Engineering - Linkedin
10. Browser Fragmentation
All major browsers don’t
equally support HTML5
across all platforms
Compatibility testing must
be done on all potential
target browsers
Not a uniform standard
Varies from browser-tobrowser and browser
version
Must continuously
optimize web app for
multiple devices, browsers
and platforms.
11. HTML5 Development Approach
Challenges
• Less stable than native
• Pulls in data much more slowly
than native
• Browser fragmentation
• No app store discoverability
• May take longer to generate
revenue
• Scarcity of mobile web developers
• Less offline capabilities
• Poor gaming capabilities
• Not as UI rich as native
• Less device access capabilities
Advantages
• Leverage effective web search
technology for discoverability
• Native mobile developers are
getting more expensive
• More capable than HTML4
• Multimedia support
• Cost efficient
• Cross-platform
• Less maintenance
• Multivariate testing
• Faster time-to-market
• Smaller device footprint
• Easy to update / upgrade
• Can be wrapped in hybrid format
12. Kony Development Platform
Next Generation HTML5
Develop web apps with HTML5,
JS and CSS3
Reuse UI/UX and business logic
with HTML5/4 SPA method
Tools /
Frameworks
Outcomes
API
HTML 5/4
Hybrid
Device Specific
Mixed-Mode
Channel Specific
Incorporate native device
capabilities into hybrid apps
Same app definition used for
web and native applications
Deliver device specific browseroptimized HTML5/4 markup
Integration
Kony mBaaS
Import and reuse 3rd-party
frameworks
13. Kony & HTML5
• SPA utilized to separate UI/UX from
•
•
•
•
•
•
•
•
business logic
HTML5/4 browser variation handling
Responsive and adaptive design
Native device capabilities, including
HTML5/4 with device detection for
10,000 device types
Audio and video elements to support
multimedia rendering without plugins
Touch events and gestures
CSS3 for 2D & 3D
transformations, targeted media
queries, gradients, rounded
corners, shadows, and more
Input elements to support a variety of
types:
number, email, URL, range, datapicker, et
c.
Semantic elements for
sections, headers, footers, etc…
14. Eliminating HTML5 Challenge with Kony
Kony
Browser
Kony handles the variances to
Fragmentation support HTML5 across “All” browsers
Cost
Testing
Performance
HTML5
Developer codes the variances to
support HTML5 across browsers
Single platform for development and
integration
Additional code required to handle
current variances and development
required for server side components
Integrate test environment to test
applications on “ALL” target devices
Apps must be tested on a range of
popular devices. Developers must
standup test suite for each target
device
Highly optimized code to maintain
HTML5 may be designed to run on
performance across varying hardware various devices, but no reliable way
specifications
to maintain performance across
varying hardware specifications
15. Where HTML5 is a Good Fit
• Viable Solutions
Content driven industries without large
user bases
Publishing, magazines, newsletters, etc…
Information/content-driven, forms-based
and mapping apps
• Low Storage Requirement
Local storage limits for mobile web apps is
50 MB
• Simple Graphics
Does not require highest quality UI/UX
• Extensive Device Interaction IS NOT Required
HTML5 has limited support for device API’s
16. Debunking the Myths
?
?
?
?
HTML5 is all I need to
go mobile.
I only need one
skillset to build
HTML5 Applications.
Browsers will
eventually
standardize HTML5.
Cost of developing an
mobile app with
HTML5 is less.
✓
HTML5 is a fantastic technology that provides
significant browsing improvements. However, it will
not reduce the need for companies to provide native
applications as a part of their mobile channel mix.
✓
HTML5 development requires HTML, CSS3 and
JavaScript expertise. If creating hybrid mobile apps
without Kony, expertise with targeted device APIs is
required.
✓
Non–standard browsers implementations are caused
by competitive forces, competition won’t go away.
Browsers wars will produce continued fragmentation.
✓
Many technologists hope HTML5 will be the silver
bullet to tame the mobile chaos. HTML5 simply adds
another development outcome organizations must
support.
FACT
FACT
FACT
FACT
17. Summary
• Determine if HTML5 satisfies your business
and user needs. It may be the right answer
for your development efforts.
• Companies wanting to compete effectively in
the mobile marketplace can’t rely on browser
technology alone.
• With Kony, supporting new technologies like
HTML5 becomes a business decision because
we handle the mobile chaos for you.
• No need to gamble on the future of the
mobile industry.
Editor's Notes
Kony HTML5/4, Legacy, Adaptive or REsponsive
Kony HTML5/4, Legacy, Adaptive or REsponsive
Kony HTML5/4, Legacy, Adaptive or REsponsive
CSS stands for Cascading Style Sheets Styles - define how to display HTML elementsXHTML is HTML defined as an XML applicationAjax (sometimes called Asynchronous JavaScript and XML) is a way of programming for the Web that gets rid of the hourglass. Data, content, and design are merged together into a seamless whole.
Kony HTML5/4, Legacy, Adaptive or REsponsive
Problems with Facebook – Tooling (Testing) debugging tools in mobile browsers don't provide enough visibility into what is happening with memory in particular. The nature of Facebook's app contributes to the difficulties it encounters with scrolling performance across mobile devices. Facebook's newsfeed and Timeline in particular experience slow and inconsistent performance because they implement an "infinite scrolling" model in which content is pre-fetched and appended as the user reaches its location. The number of objects in memory, including graphics, can grow quite large. Different browsers make different tradeoffs in these extreme situations, resulting in inconsistent frame-rates, exhaustion of GPU buffers, lagging of UI threads, etc.GPUs tend to be black boxes to the app developer (and that the GPU makers, for their own reasons, like it that way). In an app like Facebook, with the size of the data being handled so far outstripping the size of GPU buffers.
