Slides from a presentation I gave at these conferences:
— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon
I co-presented at Big Design with Matt Baxter.
http://twitter.com/mbxtr
PhoneGap: Building Mobile Applications with HTML/JSRyan Stewart
An overview of PhoneGap. Covers the basics about what PhoneGap is, how to get started, how to use the device APIs, and how to debug it along with some other things to consider when building mobile applications with HTML/JS/CSS.
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
The final demo for this presentation can be downloaded at:
https://www.dropbox.com/s/9j09wip6wz84b61/JSDevConMobile-JQM-PhoneGap-Demo.zip
SESSION ABSTRACT
=================
Write Once, Run Everywhere. How many times have we been promised true cross-platform development? HTML5 seems to be the closest we’ve ever been to writing applications once and running them on multiple mobile devices, such as iOS, Android, Windows Phone or Blackberry.
But native mobile apps have taken all the spotlight in recent years thanks to the introduction of hundreds of thousands of apps in various app stores from Apple, Google, Microsoft and BlackBerry. Apps offer a great native platform experience, but they can be expensive to build and require specific languages, SDKs and skill sets across multiple platforms. Mobile web sites offer a great way to engage with consumers and corporate workers alike without requiring the installation of any app, and can in turn be adapted as deployable "hybrid" apps.
This session explores the fundamentals of native vs. web apps, and how to choose the right approach for any given scenario. We begin with an exploration of the benefits of web development for smartphones using the most popular HTML5 & JavaScript framework for mobile: jQuery Mobile (JQM). We’ll go over a quick primer on HTML5, CSS3 and JavaScript, followed by everything you need to get started with JQM. We’ll cover the most common development environment options, how to build your first jQuery Mobile page, and how to debug your mobile web code with some of the available tools. We’ll also discuss how to develop a native-like experience on each mobile platform thanks to JQM’s adaptive rendering, and how to save and retrieve data with the cloud using Microsoft Azure Mobile Services.
We'll then learn how to leverage PhoneGap to wrap our mobile web UI into a native smartphone or tablet app. Discover how PhoneGap exposes native device hardware like cameras, sensors, GPS and more. We’ll also discuss the pros and cons of PhoneGap-based apps, how to deal with the UI design guidelines across platforms, and learn some do’s and don’ts of cross-platform mobile development.
Native mobile apps have their place for mass market revenue-generating models, but you also need to master cross-platform techniques when the situation calls for it such as in enterprise mobility scenarios and other niche areas. Web development is a critical skill required by every mobile developer; come learn how to get started and reach hundreds of millions of users through a smart mobile web & hybrid approach.
PhoneGap: Building Mobile Applications with HTML/JSRyan Stewart
An overview of PhoneGap. Covers the basics about what PhoneGap is, how to get started, how to use the device APIs, and how to debug it along with some other things to consider when building mobile applications with HTML/JS/CSS.
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
The final demo for this presentation can be downloaded at:
https://www.dropbox.com/s/9j09wip6wz84b61/JSDevConMobile-JQM-PhoneGap-Demo.zip
SESSION ABSTRACT
=================
Write Once, Run Everywhere. How many times have we been promised true cross-platform development? HTML5 seems to be the closest we’ve ever been to writing applications once and running them on multiple mobile devices, such as iOS, Android, Windows Phone or Blackberry.
But native mobile apps have taken all the spotlight in recent years thanks to the introduction of hundreds of thousands of apps in various app stores from Apple, Google, Microsoft and BlackBerry. Apps offer a great native platform experience, but they can be expensive to build and require specific languages, SDKs and skill sets across multiple platforms. Mobile web sites offer a great way to engage with consumers and corporate workers alike without requiring the installation of any app, and can in turn be adapted as deployable "hybrid" apps.
This session explores the fundamentals of native vs. web apps, and how to choose the right approach for any given scenario. We begin with an exploration of the benefits of web development for smartphones using the most popular HTML5 & JavaScript framework for mobile: jQuery Mobile (JQM). We’ll go over a quick primer on HTML5, CSS3 and JavaScript, followed by everything you need to get started with JQM. We’ll cover the most common development environment options, how to build your first jQuery Mobile page, and how to debug your mobile web code with some of the available tools. We’ll also discuss how to develop a native-like experience on each mobile platform thanks to JQM’s adaptive rendering, and how to save and retrieve data with the cloud using Microsoft Azure Mobile Services.
We'll then learn how to leverage PhoneGap to wrap our mobile web UI into a native smartphone or tablet app. Discover how PhoneGap exposes native device hardware like cameras, sensors, GPS and more. We’ll also discuss the pros and cons of PhoneGap-based apps, how to deal with the UI design guidelines across platforms, and learn some do’s and don’ts of cross-platform mobile development.
Native mobile apps have their place for mass market revenue-generating models, but you also need to master cross-platform techniques when the situation calls for it such as in enterprise mobility scenarios and other niche areas. Web development is a critical skill required by every mobile developer; come learn how to get started and reach hundreds of millions of users through a smart mobile web & hybrid approach.
The Spirit of Opensource - contribution as a strategy for growth and innova...Parth Lawate
Updated Slides with a new Examples & concepts
Open source is a powerful concept and used correctly it evolves a powerful & sustainable ecosystem around it. Open source can be a powerful strategy that drives growth and innovation. Learn how you or your company can adopt this powerful tool that not only increases your development velocity but also drives you to innovate and make a difference all while running a sustainable business around it .
A presentation for HackReactor on PhoneGap, a history of the project. The slides provide backdrop to the talk, and do not contain all the material discussed.
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this hands-on webinar, you will:
- learn the differences between native and web apps.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile web apps.
- gain hands-on experience using jQuery Mobile to develop a fully functional mobile-optimized web app.
- have access to a free Web server so you can continue to work/test your project live on the Web.
- continue to work with Jason and Chad so you can have a mentor during and after your project.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
Cordova APIs
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
Abstract
In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer.
Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example.
You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
Presentation materials for workshop on Hybrid App Development with Ionic Framework. Organized by Women Leaders in Technology, Nepal. Workshop conducted by Aayush Shrestha.
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
During this briefing for developers and I.T. managers, you'll get an in-depth review of the three most popular javascript-based mobile application development platforms - jQuery Mobile, Sencha Touch, and Appcelerator Titanium! You'll review the development tools, hear about the developer and debugging experience, and participate in a brief code review in order to determine which framework is the most appropriate for your next mobile project! We'll demonstrate how each framework can be used to develop the same mobile app, highlighting the strengths and weaknesses of each.
Note that the full 2.5 hour video of this presentation is available at http://bit.ly/Y04lDi
The Spirit of Opensource - contribution as a strategy for growth and innova...Parth Lawate
Updated Slides with a new Examples & concepts
Open source is a powerful concept and used correctly it evolves a powerful & sustainable ecosystem around it. Open source can be a powerful strategy that drives growth and innovation. Learn how you or your company can adopt this powerful tool that not only increases your development velocity but also drives you to innovate and make a difference all while running a sustainable business around it .
A presentation for HackReactor on PhoneGap, a history of the project. The slides provide backdrop to the talk, and do not contain all the material discussed.
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this hands-on webinar, you will:
- learn the differences between native and web apps.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile web apps.
- gain hands-on experience using jQuery Mobile to develop a fully functional mobile-optimized web app.
- have access to a free Web server so you can continue to work/test your project live on the Web.
- continue to work with Jason and Chad so you can have a mentor during and after your project.
The Cordova framework
Recurrent app architecture
Cordova CLI
Debugging Cordova applications
My development environment
Cordova APIs
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
Abstract
In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer.
Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example.
You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.
Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha
Presentation materials for workshop on Hybrid App Development with Ionic Framework. Organized by Women Leaders in Technology, Nepal. Workshop conducted by Aayush Shrestha.
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
During this briefing for developers and I.T. managers, you'll get an in-depth review of the three most popular javascript-based mobile application development platforms - jQuery Mobile, Sencha Touch, and Appcelerator Titanium! You'll review the development tools, hear about the developer and debugging experience, and participate in a brief code review in order to determine which framework is the most appropriate for your next mobile project! We'll demonstrate how each framework can be used to develop the same mobile app, highlighting the strengths and weaknesses of each.
Note that the full 2.5 hour video of this presentation is available at http://bit.ly/Y04lDi
My client, Health Service Review (HSR), has had remarkable success in reducing the cost of health care for its' clients. In this presentation you will find some additional ideas for reducing the cost of health care to your company.
A presentation on why I love Python for a lightning talk at https://www.facebook.com/KochiPython
Humour and Programming best practices are part of Python culture, we cannot separate the two :)
Anton Sakharov: The risks you take when develop cross-platform apps using HT...Mobile Trends
Technologies like PhoneGap, Xamarin and other cross-platform frameworks may be a great choice for your project. But you should be aware of the risks you take: framework lock-in, compatibility issues, easy reverse engineering etc.
The Great Mobile Debate: Native vs. Hybrid App DevelopmentNick Landry
It’s not easy being a mobile developer. iOS and Android dominate the market, Windows Phone is climbing into third place, and we’re not really sure if BlackBerry still matters. Do you focus on one platform or many? What size of the mobile population do you really want to reach? Each mobile platform comes with its own programming languages, SDKs, IDEs and application lifecycle & architecture. Are we really expected to learn all of this? Isn’t HTML5 supposed to be the Silver Bullet so we can finally write apps once and run them everywhere? This session will demystify all these questions, walking you through the modern mobile ecosystem, and explore your options as a developer. We’ll review the native story on each major platform, discuss the pros & cons of both mobile native and web development, cover some of the cross-platform solutions available to developers, and explore best practices and guidelines to insure a successful mobile strategy. Don’t just blindly pick a side or assume that “one size fits all”, this session covers one of the most hotly contested debates in modern IT. Come join us and be a part of the conversation.
Introduction talk on Phonegap. Tells you why you should care about mobile, and how to start off using Phonegap. After seeing this presentation you should be able to start a Phonegap project pretty rapidly and feel comfortable with the file structure you're working in and structures of the platforms you're building your app for.
Instead of Introducing Mojito, I want to recap on the state of the industry, and specifically on a new trending about frameworks and platforms that are trying to blur the line between server and client. Mojito, MeteorJS, DerbyJS and others are part of that group. I also want to provide more details about the motivations, challenges and the state of the Yahoo! Cocktails platform.
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services.
Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will:
- learn what a mobile framework is.
- acquire best practices in mobile Web development.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps.
- recognize the differences between native and web apps.
- have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned.
- gain access after the webinar to a free Web server so you can see your mobile Web app live.
I gave this talk at Squares Conference 2016.
http://squaresconference.com
Code demo from the talk…
http://t7.github.io/react-starter
https://github.com/t7/react-starter
Presentation that I gave, along with coworkers Mark Sims and Mike Townson, at the Dallas Society of Visual Communications.
http://www.dsvc.org/events/working-lunch/10/2012
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Enhancing Performance with Globus and the Science DMZGlobus
ESnet has led the way in helping national facilities—and many other institutions in the research community—configure Science DMZs and troubleshoot network issues to maximize data transfer performance. In this talk we will present a summary of approaches and tips for getting the most out of your network infrastructure using Globus Connect Server.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
The Metaverse and AI: how can decision-makers harness the Metaverse for their...Jen Stirrup
The Metaverse is popularized in science fiction, and now it is becoming closer to being a part of our daily lives through the use of social media and shopping companies. How can businesses survive in a world where Artificial Intelligence is becoming the present as well as the future of technology, and how does the Metaverse fit into business strategy when futurist ideas are developing into reality at accelerated rates? How do we do this when our data isn't up to scratch? How can we move towards success with our data so we are set up for the Metaverse when it arrives?
How can you help your company evolve, adapt, and succeed using Artificial Intelligence and the Metaverse to stay ahead of the competition? What are the potential issues, complications, and benefits that these technologies could bring to us and our organizations? In this session, Jen Stirrup will explain how to start thinking about these technologies as an organisation.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Securing your Kubernetes cluster_ a step-by-step guide to success !
HTML5 Can't Do That
1. HTML5 Can’t Do That
Surveying the Mobile Landscape
Matt Baxter
UX Designer
Nathan Smith
Principal UI Architect
2. Take notes if you like. Or, you can get the slides here…
http://j.mp/html5-cant
3. Obligatory Intro Slide…
— on Twitter: @mbxtr & @nathansmith
— UI Developers (caffeine
code)
— We do UX/web/mobile stuff at
— We have mixed feelings about HTML5
4. In all honesty…
I BUILD THE LEGACY
APPS OF TOMORROW!
And hey, so do you. We’re creating software UI in a
document language. It’s a wonder anything works.
5. State of mobile in 2007, before the iPhone was introduced…
http://flickr.com/photos/djwudi/382030798
23. Firefox can run the Unreal
game engine in native JS!
Okay, so it’s not mobile.
But it’s still cool, right?
24.
25. Fun Fact:
iOS game Candy Crush Saga
makes $850,000 per day.*
*Assuming this peak number, sustained over an entire
calendar year, that’s annual revenue of $310,250,000.
http://j.mp/candy-crush-story
26. Fun Fact:
Amazon’s revenue is roughly
$167,378,082 per day.*
*61B total revenue in 2012. After operating expenses
of 45.9B, that’s a gross profit of approximately 15.1B.
http://finance.yahoo.com/q/is?s=amzn+income+statement&annual
27. So, at the very least…
HTML5 is what you use to buy
things that don’t run in HTML5.
28. This quote is sometimes (mis?) attributed to Napoleon…
“It is not enough that
I succeed, everyone
else must fail.”
He said, as he
reached for the
phone in his pocket.
http://en.wikipedia.org/wiki/Napoleon
29. So what?
Hopefully by now we can all
agree that HTML5 needn’t fail
for native apps to be considered
successful, or vice versa.
30. How we see the mobile landscape…
Approaches to Mobile Development
Web Development
Responsive or
Mobile Web App
Native Development
PhoneGap
Titanium
Xamarin
Native
HTML, CSS, JS
JavaScript API
Cross-platform C# API
C#, Java, or Objective-C
or
or
Android, Blackberry, iOS,
Windows Phone, etc.
Multiple OS (browsers)
or
Android, iOS
or
Android, iOS,
Windows Phone
Android, Blackberry, iOS,
Windows Phone, etc.
Application Services API — JSON to/from XML, etc.
Java
AS/400
.NET
MySQL
Node.js
PHP
Oracle
Python
PostgreSQL
Business Logic and Data Aggregation
Ruby
SQL Server
31. When making an app, especially if not 100% native…
It’s important to strive for 60
FPS* and avoid interactions
that feel awkward, lest you fall
into the “uncanny valley” of UX.
*FPS = Frames per second. Most movies are 24 FPS. Video games aim for 60 FPS.
32. In case you are unfamiliar with the term “uncanny valley”
The uncanny valley is a hypothesis in
the field of human aesthetics which
holds that when human app features
look and move almost, but not
exactly, like natural human beings
native apps, it causes a response of
revulsion among human observers.
https://en.wikipedia.org/wiki/Uncanny_valley
36. How PhoneGap Works
— It embeds a WebView in a native app
— Native app gives access to OS API’s
— All the UI is built via HTML/CSS
— JavaScript handles everything else
— The app wrapper compiles via…
Xcode, Eclipse, Visual Studio, or
“the cloud” build.phonegap.com
http://phonegap.com
38. Benefits of PhoneGap
— It is “the web you already know”
— Debugging via desktop browser
— Access to device API’s (GPS, etc)
— Strives to implement W3C specs
— Camera API, etc.
— Supports Windows Phone, too
http://phonegap.com
39. Drawbacks of PhoneGap
— WebView dependent on OS
— “Browser” on old Android
— IE on Windows Phone, etc.
— Not as performant as “native”
— Presupposes mad web skills
— (Okay, maybe that’s a “pro”)
http://phonegap.com
40.
41. “Topcoat is a brand new open
source CSS library designed
to help developers build web
apps with an emphasis on
speed. It evolved from the
Adobe design language
developed for Brackets, Edge
Reflow, and feedback from
the PhoneGap app developer
community.”
— Brian LeRoux
47. Benefits of Titanium
— Native UI (not necessarily look & feel)
— Code organization: Alloy MVC approach
— Views are XML, JS for Models/Controllers
— Build for iOS, Android, and Blackberry
— Some code reuse across platforms
— Entirely JavaScript based
— Uses CommonJS’s AMD approach
— Except for WebView (+HTML/CSS)
http://appcelerator.com/titanium
48. Drawbacks of Titanium
— Slow apps… I end up using WebViews
— Workflow: code, compile, rinse, repeat
— It’s XML/JS, but no DOM traversal
— No first-party way to test your code
— Regression testing is difficult
— Added file size, due to Ti framework
— Non-transferrable support license
— Can’t hand off to a coworker
http://appcelerator.com/titanium
49. Abstraction layers tend to be
harder to debug than “native”
languages: C#, Objective-C,
or Java — when using an IDE
such as Visual Studio, Xcode,
Eclipse, or Android Studio.
With “the web,” you have
familiar developer tools, built
into all major browsers.
52. Benefits of Xamarin
— Speed… It compiles to native code
— 1:1 mapping of native API’s to C#
— Code reuse: Android, iOS, Windows
— Visual IDE, lets designers see the UI
— Big-name apps use it (Rdio, anyone?)
— Transferrable support license
http://xamarin.com
53.
54. Drawbacks of Xamarin
— Still need to learn the native API’s
— Doesn’t abstract that away
— Need to know C# (“pro” if you do)
— Added file size, due to Mono framework
— Commercial, has licensing fees
http://xamarin.com
56. Developer Sites for Various Platforms
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com
57. Benefits of Native Development
— Default OS look & feel (UI conventions)
— Performance (“closer to the metal”)
— Access to device hardware (GPS, etc)
— Benefit from latest OS enhancements
— Able to hire specialists in that area
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com
58. Drawbacks of Native Development
— Tied to the particular OS you built for
— Maintaining a multi OS team/skill-set
— Keeping app in sync with OS updates
— Having multiple devices for testing
http://developer.android.com — http://developer.apple.com — http://developer.windowsphone.com
64. A serendipitous use of HTML5
HTML5 Cant Do That
Last year, we were anticipating writing a lot of
JavaScript to generate a barcode for a mobile
app. To my surprise, I found a barcode font:
“IDAutomationHC39M.” What would’ve taken
days was mere minutes, adjusting font-size.
http://www.dafont.com/idautomationhc39m.font
65. But what about JavaScript? — Glad you asked! :)
Helpful utility libraries:
— jQuery or Zepto
¬ jquery.com
¬ zeptojs.com
— Underscore or LoDash
¬ underscorejs.org
¬ lodash.com
— Handlebars
¬ handlebarsjs.com
66. There are also plenty of JavaScript MV* Frameworks
¬ angularjs.org
— Backbone
¬ backbonejs.org
— Ember
¬ emberjs.com
*MVC: Model, View, Controller — MVVM: Model, View, View Model, etc.
— Knockout
& Durandal
¬ knockoutjs.com
¬ durandaljs.com
>
— Angular
We’ve begun using this
70. SunSpider JS benchmarks, circa 2010 (lower is better)
http://sealedabstract.com/rants/why-mobile-web-apps-are-slow
71.
72. Safari on iOS 6 vs. Safari on iOS 7
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
73. So… Web, Cross-Platform, or Native?
Key Considerations:
— Features needed
— Target market
— Existing skill-sets
— Talent availability
— User experience
74. How we see the mobile landscape (revised)…
Approaches to Mobile Development
Responsive or
Mobile Web App
X
Uncanny valley
Web Development
PhoneGap
Titanium
or
Android, Blackberry, iOS,
Windows Phone, etc.
Multiple OS (browsers)
Xamarin
Native
JavaScript API
HTML, CSS, JS
or
Native Development
Cross-platform C# API
C#, Java, or Objective-C
Android, iOS
or
or
Android, iOS,
Windows Phone
Android, Blackberry, iOS,
Windows Phone, etc.
Application Services API — JSON to/from XML, etc.
Java
AS/400
.NET
MySQL
Node.js
PHP
Oracle
Python
PostgreSQL
Business Logic and Data Aggregation
Ruby
SQL Server
75. Why? Because: “I fight for the users.” — Tron
http://www.hdwallpapers.in/tag/tron.html
78. Highlights of Knockout.js
— Model, View, View Model (MVVM)
— Two-way data binding
— If user interacts with page, you can
— reflect these changes in your data
— Declarative UI: in markup, not in JS
— Observables: If data changes, UI updates
http://knockoutjs.com
79. Whenever I see “ko” in the code, I think of Street Fighter…
http://streetfighter.wikia.com
80. Highlights of Durandal.js
— Built on KO, picks up where it left off
— Routing: based on changes to URL
— View/state change transitions
— Async data fetching, with Promises
— Manage code modules with Require.js
— Enforces consistent code structure
http://durandaljs.com
81. Around the office, we refer to Durandal.js as “Duran Durandal”
http://fanart.tv/artist/1a1cd7f3-e5df-4eca-bae2-2757c9e656b5/duran-duran
84. Below a certain width,
the layout switches
to a “mobile” view.
The table rows & cells
are display:block, and
text from each <th>
is inserted as a label,
preceding the data.
87. // In a real app, this data would potentially be dynamic.
// But for the purposes of this demo, is hard-coded here.
[
{
"first_name": "Amy",
"last_name": "Poehler",
"character_first_name": "Leslie",
"character_last_name": "Knope"
},
{
"first_name": "Nick",
"last_name": "Offerman",
"character_first_name": "Ron",
"character_last_name": "Swanson"
},
{
"first_name": "Aziz",
"last_name": "Ansari",
"character_first_name": "Tom",
"character_last_name": "Haverford"
},
...
]
88. // Extend KO array, to make it sortable
ko.observableArray.fn.sort_by = function(key, reverse) {
var self = this;
self.sort(function(a, b) {
var a_key = String(a[key]);
var b_key = String(b[key]);
var n, val;
if (reverse) {
n = a_key - b_key;
val = !isNaN(n) ? n : b_key.localeCompare(a_key);
}
else {
n = b_key - a_key;
val = !isNaN(n) ? n : a_key.localeCompare(b_key);
}
return val;
});
};
89. // APP.models
models: {
// APP.models.table_view_model
table_view_model: function() {
var self = this;
// This data comes from "/json/data.js"
APP.data = APP.data || ko.observableArray(DATA_JSON);
self.data = APP.data;
}
},
...
90. // APP.init.sort_by
sort_by: function(key) {
var event = 'click.sort_by';
var str = '.table-data th[data-key] a';
body.off(event).on(event, str, function(ev) {
var el = $(this);
var th = el.closest('th');
var th_other = th.siblings('th');
var key = th.attr('data-key');
var sort = th.attr('data-sort');
var asc = 'ascending';
var desc = 'descending';
var dir = asc;
if (!sort || sort === asc) {
dir = desc;
}
var reverse = dir !== asc;
th.addClass(on).attr('data-sort', dir);
th_other.removeClass(on).removeAttr('data-sort');
APP.data.sort_by(key, reverse);
});
},