SlideShare a Scribd company logo
Modern Web Applications With HTML5
Ido Green, Developer Advocate
plus.google.com/+greenido
Modern Web Applications
Modern Applications
● Self Contained
● "Offline First"
● MV* Frameworks
● Device Aware
● #Perfmatters
● Performance! #Perfmatters
● Flaky connections (e.g. cafes, car)
● Airplane, road trip, deserted island
● Consolidates the concept of permanent application.
* We will use: Lawnchair for our demo.
Offline - Why?

Recommended for you

Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework

This document provides an overview of the Ionic Framework for developing hybrid mobile applications. It discusses the advantages of hybrid apps over native apps, including using a single codebase across platforms. It introduces Ionic as an HTML5 framework built on Angular and Cordova, containing CSS and JavaScript components for building mobile-optimized apps. It covers getting started with Ionic, the CLI, components, platform access tools, and includes examples. The goal of Ionic is to provide native-like performance for building beautiful, easy-to-maintain hybrid mobile apps.

ionicjavascriptmobileapp
Flutter Workshop 2021 @ ARU
Flutter Workshop 2021 @ ARUFlutter Workshop 2021 @ ARU
Flutter Workshop 2021 @ ARU

This document provides information about the Flutter Workshop 2021 that took place on January 25-26, 2021 at Phranakhon Si Ayutthaya Rajabhat University. It includes links to code repositories, presentations, videos, and the Google Meet for the workshop. It also introduces the workshop instructor and provides an overview of Flutter and how to build basic apps with Flutter, integrate Firebase services, and implement various UI elements and patterns.

fluttermobile application developmentdart
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 Anton Sakharov: The risks you take when develop cross-platform apps using HT... Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Anton Sakharov: The risks you take when develop cross-platform apps using HT...

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.

mobilehtml5mtc2016
● Storing assets: AppCache
● Storing data: localStorage, IndexedDB, File API.
● Offline first:
○ Pretend that there's no internet connection
○ Implement a sync layer that works only when
online.
Offline - How?
navigator.onLine & window.(ononline|onoffline)
Offline - Appcache
<html manifest="myapp.manifest">
CACHE MANIFEST
#version 1.2.3
#JS
js/main.js
#CSS
css/bootstrap.min.css
#Images
img/left-back.png
● You can use it TODAY:
○ http://caniuse.com/#feat=offline-apps
● Will also be used when the user
is online.
● Allows you to define fallback
pages.
● (!) Don't cache the manifest!
● http://www.html5rocks.com/en/tutorials/app
Use abstractions
● Lawn Chair - brian.io/lawnchair/
● asyncStorage - https://github.com/WebReflection/db
● IndexedDBShim - nparashuram.com/IndexedDBShim/
Design Web Applications

Recommended for you

Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS

Una charla sobre React Native que di el 23 de Marzo 2017 en el meetup ValenciaJS: https://www.meetup.com/es-ES/ValenciaJS/events/238249872/ En 2016 desarrollé durante seis meses una aplicación para React Native. En esta charla compartí todo lo que he aprendido sobre este framework, y cómo os puede servir para crear una app nativa para iOS y Android al mismo tiempo de manera rápida y ágil. Hablé sobre la parte positiva, y las cosas que aceleraron nuestro proceso de desarrollo, pero también sobre algunos inconvenientes que hay que tener en cuenta. Se trata sobre todo de problemas muy específicos de cada plataforma, poner en marcha un flujo de integración continua y facilitar un proceso sencillo de testar la app con los usuarios. React Native es una buena solución que está muy de moda pero esto no significa que hay que usarlo sin analizar bien las necesidades de tu proyecto. Presenté brevemente una alternativa (Ionic 2) y conté que ventajas tiene en comparación con React Native desde mi punto de vista.

reactjavascriptvalencià
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs

This document discusses using Appium, Cucumber, and Saucelabs for iOS automation testing. It provides an overview of Appium and how it works, requirements for iOS testing, and instructions for installing Appium and setting up a mobile app for testing. It also describes using Appium Inspector, writing Cucumber feature files and step definitions, and configuring tests to run on Saucelabs. The document concludes with a live demo of running a Cucumber and Appium test on Saucelabs.

seleniumcucumberios
React Native for ReactJS Devs
React Native for ReactJS DevsReact Native for ReactJS Devs
React Native for ReactJS Devs

This document introduces React Native, which allows developers to build native mobile apps for iOS and Android from JavaScript. React Native uses React to construct mobile user interfaces and allows sharing of code across platforms. It renders native UI components rather than webviews, supports flexbox layout, and exposes platform APIs. Developers can build full-stack universal apps that share code between web and mobile using React Native and tools like Redux. It provides benefits like hot reloading, native performance, and the ability to add it incrementally to existing apps.

reactsoftware developmentreact-native
(Da New) Design process
A Page? An App?
● It's not pages anymore
● Design from the content out
● Your web app as a collection of
(web) components
● Less is more: Any addition has the
potential to ruin our MVP
Design A List Again?
● Don't reinvent the wheel
○ http://html5rock.com
○ http://pttrns.com
○ http://mobile-patterns.com
● Don't let "web" nor "Enterprise"
be an excuse
Design - Phones? Tablets?
● Start with the UX
○ Balsamiq, Creately,
MockFlow
○ Aim for common
device breakpoints
(4:3, 16:9)

Recommended for you

iOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and SaucelabsiOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and Saucelabs

This document discusses iOS automation testing using Cucumber, Appium and Saucelabs. It provides an overview of Appium and its capabilities for testing hybrid and native mobile apps. It then details the installation and setup process for Appium on Mac including prerequisites like NodeJS, Xcode and Ruby. The document demonstrates running Appium locally and on Saucelabs cloud including uploading the mobile app. It also introduces the Appium Inspector tool for recording and playing back tests. Lastly, it advertises a live demo of Cucumber, Appium and Saucelabs integration for iOS automation.

bddmobileios
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native

React Native is an open source framework by Facebook that enables software engineers to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. I'll talk about what React Native actually is (and what it isn't), how it works under the hood, and why it was designed like that.

react-nativejavascript
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native

This document introduces React Native, a framework for building mobile apps using React. It allows building Android and iOS apps with shared code. React Native uses a virtual DOM for fast rendering. Components manage state and receive data through props. Lifecycle methods handle mounting, updating, and unmounting. Setting up requires Node.js, React Native CLI, and Android Studio or Xcode. Hot reloading, Flexbox layouts, and libraries like Lottie and React Navigation make development easier.

mobile application developmentandroidreact-native
Philosophy: Adaptive Apps
● Adaptive apps
○ Custom views and templates for each form factor
○ Shared the model
● Use responsive design within the form factor
● progressive enhancement
So your app is useful on
any platform.
Building Web Applications
MV* For The Win
● Separating concerns
○ Model handles data
○ server persistence layer
○ View handles user input and
rendering
● Used to be on the server...
AngularJS - Client Side Framework
Angular.js - Let you extend HTML
vocabulary for your application.
● Data binding
● Extensible HTML
● Dependency Injection / Testable
More options: addyosmani.github.com/todomvc/

Recommended for you

React Native in a nutshell
React Native in a nutshellReact Native in a nutshell
React Native in a nutshell

As presented at DevDuck #6 - JavaScript meetup for developers (www.devduck.pl) ---- Looking for a company to build your React app? - Check us out at www.brainhub.eu

reactsoftwaresoftware development
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native

This document provides an introduction to React Native, including prerequisites, key concepts, architecture, libraries, and demos. React Native allows building mobile apps using React that work on both iOS and Android. It provides a native experience while allowing code reuse between platforms. Popular libraries that complement React Native development include React Navigation, React Redux, and NativeBase. The document demonstrates building a simple "Hello World" app and a production app with features like custom fonts and REST API integration. It discusses challenges like frequent React Native updates and debugging tools like Chrome and Reactotron.

react-nativereact.jsmobile application development
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native

Ali Hussein Al-Sa'o is a senior front end developer with 10 years of experience in web development. The session will cover an introduction to React and React Native, including what they are, their key characteristics, and an installation guide. It will also discuss debugging in React Native and provide an overview of coding and additional resources. React Native allows building mobile apps using only JavaScript and aims to provide a faster development cycle than alternatives like Cordova through features like live reloading and over-the-air updates.

react-nativemobile-developmentreact
Mobile World - RESTful World
Photos
● GET http://ex.com/_ah/api/picturesque/v1/photos
● POST http://ex.com/_ah/api/picturesque/v1/photo
● PATCH http://ex.com/_ah/api/picturesque/v1/photo/id
Users
● POST http://ex.com/_ah/api/picturesque/v1/users/join
And more...
APIs - Demo Time
goo.gl/XPnXj
Demo of 'Note Generator'
Transferable Objects Demo

Recommended for you

Discover Android Wear
Discover Android WearDiscover Android Wear
Discover Android Wear

Google has been in the press a lot in the past few days since announcing Android Wear, their upcoming line of Android branded smart watches. Wearables are the next big frontier for smart technology. And on March 18, 2014, Google announced its part in it — Android Wear. As the name implies, Android Wear is an Android-based initiative, using Google's mobile operating system and a dedicated software development kit to kick-start the wearables space.

androidsmartwatchesjava
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup

This document discusses dockerizing and vagrantizing Appium. It begins with an overview and then discusses visualizing the Appium installation process. It notes that installing Appium can be painful due to its dependencies. It then discusses using Docker and Docker Toolbox to provision Android Appium in containers more easily. It provides commands for pulling an Appium Docker image and running Appium in Docker containers. Finally, it briefly mentions using Vagrant and Ansible to provision Appium.

dockervagrantadb
JHipster presentation by Gaetan Bloch
JHipster presentation by Gaetan BlochJHipster presentation by Gaetan Bloch
JHipster presentation by Gaetan Bloch

JHipster presentation for Geekle.us Worldwide Software Architecture Summit on the subject: Monolithic Full-stack Application Generation. Java Spring Boot Backend, PostgreSQL database, Angular Frontend, QA, GitHub Actions.

javajavascripttypescript
Device APIs WG: www.w3.org/2009/dap/
● Geolocation API (Psst... support in DevTools)
● Device Orientation API (accelerometer in your DevTools)
● WebGL ( GPU )
● HTML5 Filesystem API
● Network connectivity
● Battery API
● Gamepad API
● WebRTC
● Web Audio API ( core audio )
"Device APIs"
● mobilehtml5.org/
● caniuse.com
Google Cloud Endpoints
Modern Apps and The Server Conundrum
Have to deal with a server
○ Offload Computation
○ Sharing and Collaboration
○ Logs
But who wants to run a server?
○ Spikey traffic - Scaling challenges
○ Client Server communication
○ Serialization
○ OAuth Dance
Google App Engine

Recommended for you

React Native custom components
React Native custom componentsReact Native custom components
React Native custom components

Jeremy Grancher discusses creating custom components for React Native. He demonstrates how to build both a custom utility component and a custom UI component that renders native views. For a utility component, you create an Objective-C or Java class that extends RCTBridgeModule and export methods. For a UI component, you create a view class, a manager class that extends RCTViewManager, and export view properties and methods. Custom components allow you to extend React Native with platform-specific functionality and provide wrappers for existing native modules.

reactjavascriptcustom
Intro to react native
Intro to react nativeIntro to react native
Intro to react native

This document provides an overview and introduction to React Native, including: - What React Native is and the problems it solves like enabling cross-platform development using a single JavaScript codebase. - The technologies that comprise React Native like ReactJS and how it binds to native platforms. - Getting started with a basic React Native app and examples of extending it with custom modules. - An overview of the React Native component library and APIs. - Recommendations to get familiar with related technologies like JSX, Flow, and Node.js. - Thoughts on the benefits and challenges of developing with React Native.

react nativereact-nativereactjs
Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIs

Modern web apps are rich, interactive applications. This webcast will cover new techniques for building modern web apps and how to utilize the latest HTML5 APIs to create a new class of web apps that will delight and amaze your users. In this interactive event, Ido Green, the author of Web Workers, will cover the following: * Defining the modern web app * Designing a modern web app * HTML5 Power tools/APIs * Tips & best practices

google chromehtml5google app engine
Google App Engine
Google APIs: The Discovery Document
Google APIs: Client Libraries
● Web
○ JavaScript: google-api-javascript-client
○ Node.js: google-api-nodejs-client
○ Dart: google-api-dart-client
● Mobile
○ Objective C: google-api-objectivec-client
○ Java: google-api-java-client
● Server-side
○ Ruby: google-api-ruby-client
○ Python: google-api-python-client
○ Go: google-api-go-client
○ PHP: google-api-php-client
○ .NET: google-api-dotnet-client
○ GWT: gwt-google-apis
Google APIs
HTML
<body>
...
<script type="text/javascript">
function init() {
gapi.client.load(‘urlshortener’, 'v1’, function() {});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>

Recommended for you

Web Forms The Right Way
Web Forms The Right WayWeb Forms The Right Way
Web Forms The Right Way

Forms are the main 'entry barrier' to anything meaningful on the web. It might be a registration form, sign-up form or a shopping cart. In all of them, you wish to do the best in order to make your users happy with the experience. In these slides, we will cover the best practices so your forms will rock.

mobile webformweb design
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance

The Mobile Web is a complicated beast, making Mobile Web Performance a tough problem to tackle. Is an iPad on WiFi a part of the Mobile Web? How about a laptop with a 3G stick? This presentation tries to split the Mobile Web into three categories, to make it more manageable: Network, Software & Hardware. For each, it reviews the performance challenges this category entails, and offers possible solutions to those challenges. A recording of this presentation (with audio) is available here: http://vimeo.com/32917131

mobile web performance feo
Collaborative Assessment: Working Together Toward Institutional Change
Collaborative Assessment: Working Together Toward Institutional ChangeCollaborative Assessment: Working Together Toward Institutional Change
Collaborative Assessment: Working Together Toward Institutional Change

This presentation discusses methods of collaborative assessment used at Passaic County Community College to assess student writing, critical thinking, and information literacy skills across writing intensive courses, as well as to assess the courses and the overall writing program. Assessment methods include the use of rubrics to evaluate student work, surveys of students and faculty, and analysis of student ePortfolios, which collect student assignments and reflections. The goal is to improve student learning outcomes through improved course design and professional development for faculty.

Google Cloud Endpoints
Simple GET API Request
Using Data Model for Insert
Python
@endpoints.api(name='picturesque', version='v1',
description='Photos API for Picturesque App')
class PicturesqueApi(remote.Service):
@Photo.method(path='photo', name='photo.insert')
def PhotoInsert(self, photo):
# do some validation
photo.put()
return photo
Insert With Drag and Drop Demo
Python

Recommended for you

Unit3
Unit3Unit3
Unit3

This document provides an overview of the topics to be covered in Unit 3: Time Out. The unit will teach how to talk about jobs and describe companies, discuss daily routines, and use the present simple tense and big numbers. Specifically, it will cover talking about one's job, employer, and place of work. It will also cover numbers and decimal numbers, with examples given. Daily routines will also be discussed.

Cap 4 gases-3662
Cap 4 gases-3662Cap 4 gases-3662
Cap 4 gases-3662

Este documento presenta varios ejercicios sobre el comportamiento de los gases ideales y la teoría cinético-molecular. Se revisan las leyes de Boyle, Charles y Avogadro, y la ecuación de estado de los gases ideales. Los ejercicios cubren temas como las propiedades de los gases individuales y las mezclas de gases, y conceptos como presión parcial, velocidad molecular y energía cinética. Se proporcionan las respuestas detalladas a cada ejercicio.

gases ideales
VANABBETOTVESSEM
VANABBETOTVESSEMVANABBETOTVESSEM
VANABBETOTVESSEM

Work

Update Demo
Python
List Demo - Get Photos Baby!
Python
var req = gapi.client.picturesque.photo.list();
req.execute(function(data) {
data.items = data.items || [];
console.log("-- We have " + data.items.length);
addPhotos(data.items);
});
Demo Time
Python
picturesque-app.appspot.com/
"Smart" Client
● Network calls are expensive
● "Client" photo library
○ Lawnchair allows us to store photos' metadata
offline
○ filer.js to store the photos
○ Application Cache
● Do not Repeat Yourself
○ Applies to code and to API calls
○ Only retrieve photos that have been updated
since the last API call

Recommended for you

Java Eye Architecture
Java Eye ArchitectureJava Eye Architecture
Java Eye Architecture

The document discusses JavaEye, a popular Chinese technical blog. It describes the evolution of JavaEye's architecture over time from a single server running Ruby on Rails to a more complex distributed system with front-end web servers, backend application servers, a search server, database servers, and caching. It highlights the technologies used at each stage, including Lighttpd, Memcached, and search tools like Ferret and Lucene, and how caching improved performance by reducing SQL queries.

rails
精益创业讨论
精益创业讨论精益创业讨论
精益创业讨论

The Lean Startup notes

startuplean
Google Platform Overview (April 2014)
Google Platform Overview (April 2014)Google Platform Overview (April 2014)
Google Platform Overview (April 2014)

Many new things are available with Google's APIs and services. These slides cover the main APIs: Android, Chrome, Cloud, YouTube, Maps, Google+ and wallet. There are many more APIs and services that you can leverage. Check them on: developers.google.com

androidchromeapi
Chrome DevTools
What Is New?
○ Edit local projects
○ Check Devices: User agents, screen sizes, touch events etc'
○ Map source for: coffeescript, sass, dart etc'.
○ Test on your mobile device from DevTools.
○ More?
■ GDL "The Breakpoint" episodes
■ Improving Your 2013 Productivity With The Chrome DevTools
The Screen Are Smaller
● Debug
○ Remote debugging hack with jsconsole.com
○ Chrome for Android remote debug with DevTools.
● Testing
○ Qunit to test models
○ Selenium and its mobile option Remote Web Driver
● How To
○ http://mobile-html.appspot.com/
Debug With Chrome DevTools

Recommended for you

geek_lifestyle
geek_lifestylegeek_lifestyle
geek_lifestyle

The document promotes an original geek lifestyle with fewer beards. It references various websites and images related to nerd culture, including Venn diagrams, Benjamin Franklin's autobiography, and toy companies. The concluding message suggests making fun of someone now could lead to being hired by them later.

startupseattlegeek
Odissea per a 4 rt de la eso
Odissea per a  4 rt de la esoOdissea per a  4 rt de la eso
Odissea per a 4 rt de la eso

Resum senzill de les aventures d'Ulisses

Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)

What is new and hot on Google Cloud? How can you work like a pro with some (or all) the new APIs and services... Here are some good starting points to follow.

google cloud storagegoogle drivegoogle cloud
Key Take Aways
● Build powerful applications with Google Cloud Endpoints
● HTML5 APIs are ready and getting better fast.
● AngularJS - be more productive
● Leverage Modern Browser Features:
○ Offline
○ Web RTC
○ New CSS3 artifacts
○ Web workers
Questions? THANK YOU!
Ido Green
Developer Relations
http://plus.google.com/+greenido
App:: https://picturesque-app.appspot.com/
HTML5 APIs: http://ido-green.appspot.com/html5fest-il/
Slides: http://ido-green.appspot.com/

More Related Content

What's hot

Vietnam qa meetup
Vietnam qa meetupVietnam qa meetup
Vietnam qa meetup
Syam Sasi
 
Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPods
CocoaHeads France
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
Juarez Filho
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
Shyjal Raazi
 
Flutter Workshop 2021 @ ARU
Flutter Workshop 2021 @ ARUFlutter Workshop 2021 @ ARU
Flutter Workshop 2021 @ ARU
Anuchit Chalothorn
 
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 Anton Sakharov: The risks you take when develop cross-platform apps using HT... Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Mobile Trends
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Marcel Kalveram
 
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
Shashikant Jagtap
 
React Native for ReactJS Devs
React Native for ReactJS DevsReact Native for ReactJS Devs
React Native for ReactJS Devs
Barak Cohen
 
iOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and SaucelabsiOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and Saucelabs
Shashikant Jagtap
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
Tadeu Zagallo
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
Dani Akash
 
React Native in a nutshell
React Native in a nutshellReact Native in a nutshell
React Native in a nutshell
Brainhub
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
Ali Sa'o
 
Discover Android Wear
Discover Android WearDiscover Android Wear
Discover Android Wear
Troy Miles
 
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup
Shashikant Jagtap
 
JHipster presentation by Gaetan Bloch
JHipster presentation by Gaetan BlochJHipster presentation by Gaetan Bloch
JHipster presentation by Gaetan Bloch
Gaëtan Bloch
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
Jeremy Grancher
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
ModusJesus
 

What's hot (20)

Vietnam qa meetup
Vietnam qa meetupVietnam qa meetup
Vietnam qa meetup
 
Build a lego app with CocoaPods
Build a lego app with CocoaPodsBuild a lego app with CocoaPods
Build a lego app with CocoaPods
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
Flutter Workshop 2021 @ ARU
Flutter Workshop 2021 @ ARUFlutter Workshop 2021 @ ARU
Flutter Workshop 2021 @ ARU
 
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 Anton Sakharov: The risks you take when develop cross-platform apps using HT... Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
 
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
 
React Native for ReactJS Devs
React Native for ReactJS DevsReact Native for ReactJS Devs
React Native for ReactJS Devs
 
iOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and SaucelabsiOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and Saucelabs
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
 
React Native in a nutshell
React Native in a nutshellReact Native in a nutshell
React Native in a nutshell
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Creating books app with react native
Creating books app with react nativeCreating books app with react native
Creating books app with react native
 
Discover Android Wear
Discover Android WearDiscover Android Wear
Discover Android Wear
 
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup
 
JHipster presentation by Gaetan Bloch
JHipster presentation by Gaetan BlochJHipster presentation by Gaetan Bloch
JHipster presentation by Gaetan Bloch
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 

Viewers also liked

Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIs
Ido Green
 
Web Forms The Right Way
Web Forms The Right WayWeb Forms The Right Way
Web Forms The Right Way
Ido Green
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
Guy Podjarny
 
Collaborative Assessment: Working Together Toward Institutional Change
Collaborative Assessment: Working Together Toward Institutional ChangeCollaborative Assessment: Working Together Toward Institutional Change
Collaborative Assessment: Working Together Toward Institutional Change
Elizabeth Nesius
 
Unit3
Unit3Unit3
Cap 4 gases-3662
Cap 4 gases-3662Cap 4 gases-3662
Cap 4 gases-3662
opulento22
 
VANABBETOTVESSEM
VANABBETOTVESSEMVANABBETOTVESSEM
VANABBETOTVESSEM
dhrvanvessem
 
Java Eye Architecture
Java Eye ArchitectureJava Eye Architecture
Java Eye Architecture
Robbin Fan
 
精益创业讨论
精益创业讨论精益创业讨论
精益创业讨论
Robbin Fan
 
Google Platform Overview (April 2014)
Google Platform Overview (April 2014)Google Platform Overview (April 2014)
Google Platform Overview (April 2014)
Ido Green
 
geek_lifestyle
geek_lifestylegeek_lifestyle
geek_lifestyle
sarahnovotny
 
Odissea per a 4 rt de la eso
Odissea per a  4 rt de la esoOdissea per a  4 rt de la eso
Odissea per a 4 rt de la eso
Carolina Chavarria
 
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Ido Green
 
The High School Connection: Bridging the Gap Between High School and College
The High School Connection: Bridging the Gap Between High School and CollegeThe High School Connection: Bridging the Gap Between High School and College
The High School Connection: Bridging the Gap Between High School and College
Elizabeth Nesius
 
Wiki Technology By It Rocks
Wiki Technology By It RocksWiki Technology By It Rocks
Wiki Technology By It Rocks
naveenv
 
Rwservlet
RwservletRwservlet
Rwservlet
Haas Colby
 
Lecture 3 Perl & FreeBSD administration
Lecture 3 Perl & FreeBSD administrationLecture 3 Perl & FreeBSD administration
Lecture 3 Perl & FreeBSD administration
Mohammed Farrag
 
2013 accenture-consumer-electronics-products-and-services-usage-report
2013 accenture-consumer-electronics-products-and-services-usage-report2013 accenture-consumer-electronics-products-and-services-usage-report
2013 accenture-consumer-electronics-products-and-services-usage-report
François Avril
 
Message Queues : A Primer - International PHP Conference Fall 2012
Message Queues : A Primer - International PHP Conference Fall 2012Message Queues : A Primer - International PHP Conference Fall 2012
Message Queues : A Primer - International PHP Conference Fall 2012
Mike Willbanks
 

Viewers also liked (20)

Modern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIsModern Web Applications Utilizing HTML5 APIs
Modern Web Applications Utilizing HTML5 APIs
 
Web Forms The Right Way
Web Forms The Right WayWeb Forms The Right Way
Web Forms The Right Way
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
 
Collaborative Assessment: Working Together Toward Institutional Change
Collaborative Assessment: Working Together Toward Institutional ChangeCollaborative Assessment: Working Together Toward Institutional Change
Collaborative Assessment: Working Together Toward Institutional Change
 
Unit3
Unit3Unit3
Unit3
 
Cap 4 gases-3662
Cap 4 gases-3662Cap 4 gases-3662
Cap 4 gases-3662
 
VANABBETOTVESSEM
VANABBETOTVESSEMVANABBETOTVESSEM
VANABBETOTVESSEM
 
Java Eye Architecture
Java Eye ArchitectureJava Eye Architecture
Java Eye Architecture
 
精益创业讨论
精益创业讨论精益创业讨论
精益创业讨论
 
Google Platform Overview (April 2014)
Google Platform Overview (April 2014)Google Platform Overview (April 2014)
Google Platform Overview (April 2014)
 
geek_lifestyle
geek_lifestylegeek_lifestyle
geek_lifestyle
 
Odissea per a 4 rt de la eso
Odissea per a  4 rt de la esoOdissea per a  4 rt de la eso
Odissea per a 4 rt de la eso
 
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
Scale with a smile with Google Cloud Platform At DevConTLV (June 2014)
 
The High School Connection: Bridging the Gap Between High School and College
The High School Connection: Bridging the Gap Between High School and CollegeThe High School Connection: Bridging the Gap Between High School and College
The High School Connection: Bridging the Gap Between High School and College
 
Wiki Technology By It Rocks
Wiki Technology By It RocksWiki Technology By It Rocks
Wiki Technology By It Rocks
 
Rwservlet
RwservletRwservlet
Rwservlet
 
Lecture 3 Perl & FreeBSD administration
Lecture 3 Perl & FreeBSD administrationLecture 3 Perl & FreeBSD administration
Lecture 3 Perl & FreeBSD administration
 
The Armory
The ArmoryThe Armory
The Armory
 
2013 accenture-consumer-electronics-products-and-services-usage-report
2013 accenture-consumer-electronics-products-and-services-usage-report2013 accenture-consumer-electronics-products-and-services-usage-report
2013 accenture-consumer-electronics-products-and-services-usage-report
 
Message Queues : A Primer - International PHP Conference Fall 2012
Message Queues : A Primer - International PHP Conference Fall 2012Message Queues : A Primer - International PHP Conference Fall 2012
Message Queues : A Primer - International PHP Conference Fall 2012
 

Similar to Utilizing HTML5 APIs

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Ido Green
 
Mobile, web and cloud - the triple crown of modern applications
Mobile, web and cloud -  the triple crown of modern applicationsMobile, web and cloud -  the triple crown of modern applications
Mobile, web and cloud - the triple crown of modern applications
Ido Green
 
#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...
#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...
#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...
e-Legion
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
Eric Deng
 
Building Kick Ass Video Games for the Cloud
Building Kick Ass Video Games for the CloudBuilding Kick Ass Video Games for the Cloud
Building Kick Ass Video Games for the Cloud
Chris Schalk
 
Web App Prototypes with Google App Engine
Web App Prototypes with Google App EngineWeb App Prototypes with Google App Engine
Web App Prototypes with Google App Engine
Vlad Filippov
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
Ryan Stewart
 
Mobile backends with Google Cloud Platform (MBLTDev'14)
Mobile backends with Google Cloud Platform (MBLTDev'14)Mobile backends with Google Cloud Platform (MBLTDev'14)
Mobile backends with Google Cloud Platform (MBLTDev'14)
Natalia Efimtseva
 
App engine devfest_mexico_10
App engine devfest_mexico_10App engine devfest_mexico_10
App engine devfest_mexico_10
Chris Schalk
 
Google App Engine Overview - BarCamp Phnom Penh 2011
Google App Engine Overview - BarCamp Phnom Penh 2011Google App Engine Overview - BarCamp Phnom Penh 2011
Google App Engine Overview - BarCamp Phnom Penh 2011
traactivity
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
Mahbubur Rahman
 
Google App Engine Overview and Update
Google App Engine Overview and UpdateGoogle App Engine Overview and Update
Google App Engine Overview and Update
Chris Schalk
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
EDINA, University of Edinburgh
 
How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...
Tomiwa Ademidun
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine Development
Ron Reiter
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
Sapna Upreti
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
Rodrigo Gil
 
Red Hat Forum Benelux 2015
Red Hat Forum Benelux 2015Red Hat Forum Benelux 2015
Red Hat Forum Benelux 2015
Microsoft
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Johannes Weber
 
Creating Rajanikant Powered Site
Creating Rajanikant Powered SiteCreating Rajanikant Powered Site
Creating Rajanikant Powered Site
markandey
 

Similar to Utilizing HTML5 APIs (20)

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
 
Mobile, web and cloud - the triple crown of modern applications
Mobile, web and cloud -  the triple crown of modern applicationsMobile, web and cloud -  the triple crown of modern applications
Mobile, web and cloud - the triple crown of modern applications
 
#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...
#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...
#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...
 
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
 
Building Kick Ass Video Games for the Cloud
Building Kick Ass Video Games for the CloudBuilding Kick Ass Video Games for the Cloud
Building Kick Ass Video Games for the Cloud
 
Web App Prototypes with Google App Engine
Web App Prototypes with Google App EngineWeb App Prototypes with Google App Engine
Web App Prototypes with Google App Engine
 
Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
Mobile backends with Google Cloud Platform (MBLTDev'14)
Mobile backends with Google Cloud Platform (MBLTDev'14)Mobile backends with Google Cloud Platform (MBLTDev'14)
Mobile backends with Google Cloud Platform (MBLTDev'14)
 
App engine devfest_mexico_10
App engine devfest_mexico_10App engine devfest_mexico_10
App engine devfest_mexico_10
 
Google App Engine Overview - BarCamp Phnom Penh 2011
Google App Engine Overview - BarCamp Phnom Penh 2011Google App Engine Overview - BarCamp Phnom Penh 2011
Google App Engine Overview - BarCamp Phnom Penh 2011
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 
Google App Engine Overview and Update
Google App Engine Overview and UpdateGoogle App Engine Overview and Update
Google App Engine Overview and Update
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...How to build a website that works without internet using angular, service wor...
How to build a website that works without internet using angular, service wor...
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine Development
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
 
Red Hat Forum Benelux 2015
Red Hat Forum Benelux 2015Red Hat Forum Benelux 2015
Red Hat Forum Benelux 2015
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Creating Rajanikant Powered Site
Creating Rajanikant Powered SiteCreating Rajanikant Powered Site
Creating Rajanikant Powered Site
 

More from Ido Green

How to get things done - Lessons from Yahoo, Google, Netflix and Meta
How to get things done - Lessons from Yahoo, Google, Netflix and Meta How to get things done - Lessons from Yahoo, Google, Netflix and Meta
How to get things done - Lessons from Yahoo, Google, Netflix and Meta
Ido Green
 
Crypto 101 and a bit more [Sep-2022]
Crypto 101 and a bit more [Sep-2022]Crypto 101 and a bit more [Sep-2022]
Crypto 101 and a bit more [Sep-2022]
Ido Green
 
The Future of Continuous Software Updates Is Here
The Future of Continuous Software Updates Is HereThe Future of Continuous Software Updates Is Here
The Future of Continuous Software Updates Is Here
Ido Green
 
Open Source & DevOps Market trends - Open Core Summit
Open Source & DevOps Market trends - Open Core SummitOpen Source & DevOps Market trends - Open Core Summit
Open Source & DevOps Market trends - Open Core Summit
Ido Green
 
DevOps as a competitive advantage
DevOps as a competitive advantageDevOps as a competitive advantage
DevOps as a competitive advantage
Ido Green
 
Data Driven DevOps & Technologies (swampUP 2019 keynote)
Data Driven DevOps & Technologies (swampUP 2019 keynote)Data Driven DevOps & Technologies (swampUP 2019 keynote)
Data Driven DevOps & Technologies (swampUP 2019 keynote)
Ido Green
 
Create An Amazing Apps For The Google Assistant!
Create An Amazing Apps For The Google Assistant!Create An Amazing Apps For The Google Assistant!
Create An Amazing Apps For The Google Assistant!
Ido Green
 
VUI Design
VUI DesignVUI Design
VUI Design
Ido Green
 
Google Assistant - Why? How?
Google Assistant - Why? How?Google Assistant - Why? How?
Google Assistant - Why? How?
Ido Green
 
The Google Assistant - Macro View (October 2017)
The Google Assistant - Macro View (October 2017)The Google Assistant - Macro View (October 2017)
The Google Assistant - Macro View (October 2017)
Ido Green
 
Actions On Google - GDD Europe 2017
Actions On Google - GDD Europe 2017Actions On Google - GDD Europe 2017
Actions On Google - GDD Europe 2017
Ido Green
 
Building conversational experiences with Actions on Google
Building conversational experiences with Actions on GoogleBuilding conversational experiences with Actions on Google
Building conversational experiences with Actions on Google
Ido Green
 
Actions On Google - How? Why?
Actions On Google - How? Why?Actions On Google - How? Why?
Actions On Google - How? Why?
Ido Green
 
Startups Best Practices
Startups Best PracticesStartups Best Practices
Startups Best Practices
Ido Green
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
Ido Green
 
Earn More Revenue With Firebase and AdMob
Earn More Revenue With Firebase and AdMobEarn More Revenue With Firebase and AdMob
Earn More Revenue With Firebase and AdMob
Ido Green
 
How To Grow Your User Base?
How To Grow Your User Base?How To Grow Your User Base?
How To Grow Your User Base?
Ido Green
 
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
Ido Green
 
AMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesAMP - Accelerated Mobile Pages
AMP - Accelerated Mobile Pages
Ido Green
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
Ido Green
 

More from Ido Green (20)

How to get things done - Lessons from Yahoo, Google, Netflix and Meta
How to get things done - Lessons from Yahoo, Google, Netflix and Meta How to get things done - Lessons from Yahoo, Google, Netflix and Meta
How to get things done - Lessons from Yahoo, Google, Netflix and Meta
 
Crypto 101 and a bit more [Sep-2022]
Crypto 101 and a bit more [Sep-2022]Crypto 101 and a bit more [Sep-2022]
Crypto 101 and a bit more [Sep-2022]
 
The Future of Continuous Software Updates Is Here
The Future of Continuous Software Updates Is HereThe Future of Continuous Software Updates Is Here
The Future of Continuous Software Updates Is Here
 
Open Source & DevOps Market trends - Open Core Summit
Open Source & DevOps Market trends - Open Core SummitOpen Source & DevOps Market trends - Open Core Summit
Open Source & DevOps Market trends - Open Core Summit
 
DevOps as a competitive advantage
DevOps as a competitive advantageDevOps as a competitive advantage
DevOps as a competitive advantage
 
Data Driven DevOps & Technologies (swampUP 2019 keynote)
Data Driven DevOps & Technologies (swampUP 2019 keynote)Data Driven DevOps & Technologies (swampUP 2019 keynote)
Data Driven DevOps & Technologies (swampUP 2019 keynote)
 
Create An Amazing Apps For The Google Assistant!
Create An Amazing Apps For The Google Assistant!Create An Amazing Apps For The Google Assistant!
Create An Amazing Apps For The Google Assistant!
 
VUI Design
VUI DesignVUI Design
VUI Design
 
Google Assistant - Why? How?
Google Assistant - Why? How?Google Assistant - Why? How?
Google Assistant - Why? How?
 
The Google Assistant - Macro View (October 2017)
The Google Assistant - Macro View (October 2017)The Google Assistant - Macro View (October 2017)
The Google Assistant - Macro View (October 2017)
 
Actions On Google - GDD Europe 2017
Actions On Google - GDD Europe 2017Actions On Google - GDD Europe 2017
Actions On Google - GDD Europe 2017
 
Building conversational experiences with Actions on Google
Building conversational experiences with Actions on GoogleBuilding conversational experiences with Actions on Google
Building conversational experiences with Actions on Google
 
Actions On Google - How? Why?
Actions On Google - How? Why?Actions On Google - How? Why?
Actions On Google - How? Why?
 
Startups Best Practices
Startups Best PracticesStartups Best Practices
Startups Best Practices
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
 
Earn More Revenue With Firebase and AdMob
Earn More Revenue With Firebase and AdMobEarn More Revenue With Firebase and AdMob
Earn More Revenue With Firebase and AdMob
 
How To Grow Your User Base?
How To Grow Your User Base?How To Grow Your User Base?
How To Grow Your User Base?
 
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
 
AMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesAMP - Accelerated Mobile Pages
AMP - Accelerated Mobile Pages
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 

Recently uploaded

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 

Recently uploaded (20)

Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 

Utilizing HTML5 APIs

  • 1. Modern Web Applications With HTML5 Ido Green, Developer Advocate plus.google.com/+greenido
  • 3. Modern Applications ● Self Contained ● "Offline First" ● MV* Frameworks ● Device Aware ● #Perfmatters
  • 4. ● Performance! #Perfmatters ● Flaky connections (e.g. cafes, car) ● Airplane, road trip, deserted island ● Consolidates the concept of permanent application. * We will use: Lawnchair for our demo. Offline - Why?
  • 5. ● Storing assets: AppCache ● Storing data: localStorage, IndexedDB, File API. ● Offline first: ○ Pretend that there's no internet connection ○ Implement a sync layer that works only when online. Offline - How? navigator.onLine & window.(ononline|onoffline)
  • 6. Offline - Appcache <html manifest="myapp.manifest"> CACHE MANIFEST #version 1.2.3 #JS js/main.js #CSS css/bootstrap.min.css #Images img/left-back.png ● You can use it TODAY: ○ http://caniuse.com/#feat=offline-apps ● Will also be used when the user is online. ● Allows you to define fallback pages. ● (!) Don't cache the manifest! ● http://www.html5rocks.com/en/tutorials/app
  • 7. Use abstractions ● Lawn Chair - brian.io/lawnchair/ ● asyncStorage - https://github.com/WebReflection/db ● IndexedDBShim - nparashuram.com/IndexedDBShim/
  • 9. (Da New) Design process
  • 10. A Page? An App? ● It's not pages anymore ● Design from the content out ● Your web app as a collection of (web) components ● Less is more: Any addition has the potential to ruin our MVP
  • 11. Design A List Again? ● Don't reinvent the wheel ○ http://html5rock.com ○ http://pttrns.com ○ http://mobile-patterns.com ● Don't let "web" nor "Enterprise" be an excuse
  • 12. Design - Phones? Tablets? ● Start with the UX ○ Balsamiq, Creately, MockFlow ○ Aim for common device breakpoints (4:3, 16:9)
  • 13. Philosophy: Adaptive Apps ● Adaptive apps ○ Custom views and templates for each form factor ○ Shared the model ● Use responsive design within the form factor ● progressive enhancement So your app is useful on any platform.
  • 15. MV* For The Win ● Separating concerns ○ Model handles data ○ server persistence layer ○ View handles user input and rendering ● Used to be on the server...
  • 16. AngularJS - Client Side Framework Angular.js - Let you extend HTML vocabulary for your application. ● Data binding ● Extensible HTML ● Dependency Injection / Testable More options: addyosmani.github.com/todomvc/
  • 17. Mobile World - RESTful World Photos ● GET http://ex.com/_ah/api/picturesque/v1/photos ● POST http://ex.com/_ah/api/picturesque/v1/photo ● PATCH http://ex.com/_ah/api/picturesque/v1/photo/id Users ● POST http://ex.com/_ah/api/picturesque/v1/users/join And more...
  • 18. APIs - Demo Time goo.gl/XPnXj
  • 19. Demo of 'Note Generator'
  • 21. Device APIs WG: www.w3.org/2009/dap/ ● Geolocation API (Psst... support in DevTools) ● Device Orientation API (accelerometer in your DevTools) ● WebGL ( GPU ) ● HTML5 Filesystem API ● Network connectivity ● Battery API ● Gamepad API ● WebRTC ● Web Audio API ( core audio ) "Device APIs" ● mobilehtml5.org/ ● caniuse.com
  • 23. Modern Apps and The Server Conundrum Have to deal with a server ○ Offload Computation ○ Sharing and Collaboration ○ Logs But who wants to run a server? ○ Spikey traffic - Scaling challenges ○ Client Server communication ○ Serialization ○ OAuth Dance
  • 26. Google APIs: The Discovery Document
  • 27. Google APIs: Client Libraries ● Web ○ JavaScript: google-api-javascript-client ○ Node.js: google-api-nodejs-client ○ Dart: google-api-dart-client ● Mobile ○ Objective C: google-api-objectivec-client ○ Java: google-api-java-client ● Server-side ○ Ruby: google-api-ruby-client ○ Python: google-api-python-client ○ Go: google-api-go-client ○ PHP: google-api-php-client ○ .NET: google-api-dotnet-client ○ GWT: gwt-google-apis
  • 28. Google APIs HTML <body> ... <script type="text/javascript"> function init() { gapi.client.load(‘urlshortener’, 'v1’, function() {}); } </script> <script src="https://apis.google.com/js/client.js?onload=init"></script> </body>
  • 30. Simple GET API Request
  • 31. Using Data Model for Insert Python @endpoints.api(name='picturesque', version='v1', description='Photos API for Picturesque App') class PicturesqueApi(remote.Service): @Photo.method(path='photo', name='photo.insert') def PhotoInsert(self, photo): # do some validation photo.put() return photo
  • 32. Insert With Drag and Drop Demo Python
  • 34. List Demo - Get Photos Baby! Python var req = gapi.client.picturesque.photo.list(); req.execute(function(data) { data.items = data.items || []; console.log("-- We have " + data.items.length); addPhotos(data.items); });
  • 36. "Smart" Client ● Network calls are expensive ● "Client" photo library ○ Lawnchair allows us to store photos' metadata offline ○ filer.js to store the photos ○ Application Cache ● Do not Repeat Yourself ○ Applies to code and to API calls ○ Only retrieve photos that have been updated since the last API call
  • 38. What Is New? ○ Edit local projects ○ Check Devices: User agents, screen sizes, touch events etc' ○ Map source for: coffeescript, sass, dart etc'. ○ Test on your mobile device from DevTools. ○ More? ■ GDL "The Breakpoint" episodes ■ Improving Your 2013 Productivity With The Chrome DevTools
  • 39. The Screen Are Smaller ● Debug ○ Remote debugging hack with jsconsole.com ○ Chrome for Android remote debug with DevTools. ● Testing ○ Qunit to test models ○ Selenium and its mobile option Remote Web Driver ● How To ○ http://mobile-html.appspot.com/
  • 40. Debug With Chrome DevTools
  • 41. Key Take Aways ● Build powerful applications with Google Cloud Endpoints ● HTML5 APIs are ready and getting better fast. ● AngularJS - be more productive ● Leverage Modern Browser Features: ○ Offline ○ Web RTC ○ New CSS3 artifacts ○ Web workers
  • 42. Questions? THANK YOU! Ido Green Developer Relations http://plus.google.com/+greenido App:: https://picturesque-app.appspot.com/ HTML5 APIs: http://ido-green.appspot.com/html5fest-il/ Slides: http://ido-green.appspot.com/