Creating Data Driven HTML5 Applications

•Download as PPTX, PDF•

1 like•4,170 views

Gil Fink gave a presentation on creating data-driven HTML5 applications. He discussed storing data in the client-side using HTML5 technologies like Web Storage, AppCache, and IndexedDB. He demonstrated how to use these storage APIs and emphasized that they allow creating offline web applications and decrease server load. Fink concluded that developers can start relying on client-side storages and highlighted resources for learning more about these HTML5 APIs.

Technology Design

Gil Fink
Senior Architect
SELA
Creating Data-
Driven HTML5
Applications

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
AGENDA
 HTML5: Recap
 Storing Data in the Client-Side
 Q&A
 Summary

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
HTML5: RECAP
 HTML5 ~= HTML + CSS3 + JavaScript API
 The future of the web
 Still under development
 Supposed to be ready at ~2014

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WHAT’S UNDER THE HTML5 UMBRELLA?

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
STORING DATA IN THE CLIENT-SIDE

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
DEMO
Using HTML5 Storages and AppCache

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB STORAGE
 Key/value storage
 Simple API
 sessionStorage
 Data is accessible to any page from the
same site opened in that window
 localStorage
 Data spans multiple windows and lasts
beyond the current session

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
APPCACHE
 Create offline web applications
 Use a manifest file to configure the
cache
 Introduces API to interact with cache
events and the navigator.onLine
property

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
INDEXEDDB
 Advanced key/value data
management
 Made of records holding simple values
and hierarchical objects
 Enables
 Storage of large numbers of objects locally in
the browser
 Fast insertion and extraction from the store
 Asynchronous/Synchronous API

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT – WEB
STORAGE
http://caniuse.com

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT –
OFFLINE WEB APPLICATIONS
http://caniuse.com

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WEB APPLICATION APIS SUPPORT –
INDEXEDDB
http://caniuse.com

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
WHAT WE SAW
 Web Storage
 AppCache
 IndexedDB
 We didn’t cover other storage APIs such as
 File API
 FileSystem API

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
QUESTIONS

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
SUMMARY
 You can start depending on client-side
storages
 Will help you:
 To decrease the load on server-side and
databases
 To create offline web apps

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
RESOURCES
 Session slide deck and demos –
http://sdrv.ms/1ekp929
 API specs –
http://www.w3.org/TR/webstorage/
http://www.w3.org/TR/IndexedDB/
http://dev.w3.org/html5/spec/offline.html
 My Website – http://www.gilfink.net
 Follow me on Twitter – @gilfink

www.devconnections.com
CREATING DATA-DRIVEN HTML5 APPLICATIONS
THANK YOU
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net

This document summarizes a presentation about creating data-driven HTML5 applications using client-side storage. It discusses HTML5 features like Web Storage APIs (sessionStorage and localStorage), the AppCache API for offline applications, and IndexedDB for advanced local data storage. The presentation demonstrates using these storage mechanisms and references specifications and resources for further information. The summary is that HTML5 storage APIs allow storing data locally to decrease server loads and enable offline web apps.

Creating a Data Driven UI Framework

Ankur Bansal

The document discusses creating a data-driven UI framework that allows developers to write UI code once and reuse it across different views and technologies. It achieves this through JSON-based field population and directives for complex UI components. Key aspects include using AngularJS for two-way data binding and dynamic template generation based on layout JSON, which allows creating different views from a single code base. This approach solves problems like repetitive code and multiple templates for similar views.

«The Grail: React based Isomorph apps framework»

FDConf

«I knew there had to be a better way to build mobile app»

FDConf

I knew there had to be a better way to build mobile apps. The time has never been better to learn mobile application development. For many app ideas, you don’t even need any prior native development knowledge. You can get started today with knowledge of HTML, CSS and JavaScript. Unlike native mobile development, mobile applications using web technologies can support many mobile platforms. So during this session will gain experience how to start from very basics and build mobile apps with zero knowledge. Alius will share his own experience on building hybryd applications based on PhoneGap also he promised to explain why he suddenly changed his own opinion about native apps and switched back to Xamarin.

«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»

FDConf

Мы вступаем в интересный век — век веб-компонент. В докладе рассказывается о том, как подружить различные MVC фреймворки с веб-компонентами и научить их общаться между собой при помощи MVC Elements, проекта позволяющего конвертировать React, Backbone вью, а так же Angular директивы в веб-компоненты.

Basics of Backbone.js

Avishekh Bharati

This presentation introduces Backbone.js as a JavaScript library that provides structure to client-side code using a model-view-controller (MVC) pattern. It is lightweight at under 4kb, and helps organize code into models, views, routers and collections to manage data and sync it between the HTML, JavaScript logic and database, avoiding spaghetti code that is difficult to maintain. Backbone.js is suitable for building front-end heavy and data-driven apps, from scalable widgets to massive applications.

SPSNL16 - Building Office 365 and SharePoint solutions using modern developer...

Waldek Mastykarz

Server Side Responsive Layouts for ASP.NET WebForms using Telerik UI for ASP....

Lohith Goudagere Nagaraj

This document discusses polyglot persistence in Azure, which refers to using multiple data storage technologies in the same application. It notes that Azure provides many persistence services like document, caching, search, and queue storage. The document recommends rethinking traditional applications to leverage these services, for example by exporting documents and images to document storage from a relational database in an e-commerce system. Using polyglot persistence allows applications to scale by utilizing the most appropriate storage for each use case.

Delivering Rich Content Applications at Scale with Nuxeo & MongoDB Atlas

Nuxeo

MongoDB is a powerful document database for managing content at scale. However, building a complex, state of the art, content-centric application on top of MongoDB requires much more than just the data layer. In this session, Nuxeo will present how MongoDB and the Nuxeo Platform work together to provide a scalable content repository and demonstrate how easy it can be to build and deploy applications on MongoDB when leveraging the Nuxeo Platform.

Azure Functions Overview

Joe Raio

Reporting Solution for ASP.NET Application with Telerik reporting

Lohith Goudagere Nagaraj

HTML 5

Karthik Madhavan

The document provides an overview of HTML5, including its key features and differences from HTML4. It discusses new HTML5 elements like <canvas>, <video>, and <audio> that enable embedding multimedia. It also covers new form input types, attributes, and APIs in HTML5 for local storage, 2D drawing, and playing video/audio. The document states that HTML5 aims to make web applications more interactive by supporting drag and drop features, editing, and offline capabilities, without requiring plugins. It concludes by discussing how HTML5 could standardize web applications and blur the line between desktop and web apps.

Introduzione a web e servizi con .net e azure

dotnetabruzzo

Developing 3D Visualization Apps

Autodesk

What’s right & wrong with WCF-WebHTTP Adapter?

BizTalk360

This document discusses the pros and cons of using the WCF-WebHTTP adapter in BizTalk, including issues with Azure service bus relays, error handling, and the JSON encoder and decoder. Workarounds are presented for common problems, such as relays only supporting the base URL and the encoder/decoder having date/time and number formatting issues. The document provides links to blog posts with more details on issues and workarounds for the WCF-WebHTTP adapter in BizTalk.

Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016

Waldek Mastykarz

NextGen Portal for Your Organization

Waldek Mastykarz

With the advent of NextGen portals, Office 365 becomes less of a box of building blocks and more of a collection of destinations: turn-key solutions ready for you to use. But how will your users reach all those destinations and where should they depart from? In this session we will take a look at how to build a solution that integrates information from NextGen portals and offers your users a starting point for their journeys bringing the most relevant information to their finger tips.

Forge - DevCon 2017, Darmstadt Germany: Integrating Forge Data Management API...

Autodesk

This document discusses integrating the Forge Data Management API with other storage providers. It covers using the API to access file storage on A360 Team, BIM 360 Docs and Fusion Team. The class objectives are to understand Forge file storage, learn how to download, upload and interact with files via the API, and review how to integrate with other providers like Box, Google Drive and Dropbox. It provides information on the Forge data structure and transferring files between Forge and other storage providers using AWS Lambda.

Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...

Lohith Goudagere Nagaraj

Building Office 365 solutions with React

Waldek Mastykarz

This document discusses using React to build Office 365 solutions and provides resources for learning React. It recommends getting a blueprint for building React web applications and creating a first React app. It also explains unidirectional data flow in Flux applications using views, actions, dispatchers, and stores. Finally, it provides contact information for the author and a link to register for a preview of customizing Office 365 solutions with React.

Backend as a Service Comparison

Serhiy Snizhny

Backend as a Service (BaaS) provides cloud-based storage and APIs for mobile and web applications without requiring developers to build their own backend system. It offers features like user registration and login, file storage, push notifications, and analytics. BaaS platforms like Kinvey, Backendless, and Parse support platforms including iOS, Android, JavaScript and store data in various formats like JSON documents or relational databases. They differ in pricing models, capabilities, and data storage approaches.

A Simpler Web App Architecture (jDays 2016)

Gustaf Nilsson Kotte

Client-side rendering enable many things. We have independent frontend and backend deploys. It’s possible to update sections of the page without re-render everything. It’s easier for teams to develop their own part of the same page (widgets). And it’s possible to develop rich user interactions. However, we also got new problems. It’s easier to break rendering since we have many run-times (all browsers) instead of one (the server) and JavaScript is not fault tolerant. There’s a really high rate of change in the JS library space. We get a longer time to first render. And client-side web applications are hard to evolve. In this talk I will show a simpler way, using a toolbox of techniques: a gateway web server, pjax, client-side includes, and custom elements.

BladeRunnerJS Show & Tell

Phil Leggetter

Typescript 102 angular and type script

Bob German

Forge - DevCon 2016: Cloud PDM Demystified – The Future of File Management

Autodesk

Rencore Webinar: SharePoint Customizations - the most overlooked road block t...

Rencore

Erwin van Hunen, Product Owner of SPTransformator, Microsoft MCM and MVP, introduces you to some things to keep an eye on that will help you in preventing your SharePoint migration projects from stalling. What you will learn: Meet the single most overlooked and potentially crucial factor for your migration project: SharePoint Customizations. - Find out, why and how to assess your SharePoint - Customizations in terms of migratability - and much more…

Big Data And HTML5 (DevCon TLV 2012)

Ido Green

Cloud-first SharePoint JavaScript Add-ins - Collab 365

Sonja Madsen

Hosting JavaScript, CSS, and images on Azure is way to go for SharePoint developers. Having JavaScript files in the cloud allows you to build your own framework and re-use the functionality instead of copy-pasting the same code over and over again. This session is a quick introduction to Azure CDN, - how to set up a CDN on Azure, how to add and delete files, and examples of how to work on SharePoint add-ins and Azure in Visual Studio 2015.

What's hot

Building solutions with the SharePoint Framework - introduction

Waldek Mastykarz

Polyglot Persistence in Azure

Marco Parenzan

Delivering Rich Content Applications at Scale with Nuxeo & MongoDB Atlas

Nuxeo

Azure Functions Overview

Joe Raio

Reporting Solution for ASP.NET Application with Telerik reporting

Lohith Goudagere Nagaraj

HTML 5

Karthik Madhavan

Introduzione a web e servizi con .net e azure

dotnetabruzzo

Developing 3D Visualization Apps

Autodesk

What’s right & wrong with WCF-WebHTTP Adapter?

BizTalk360

Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016

Waldek Mastykarz

NextGen Portal for Your Organization

Waldek Mastykarz

Forge - DevCon 2017, Darmstadt Germany: Integrating Forge Data Management API...

Autodesk

Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...

Lohith Goudagere Nagaraj

Building Office 365 solutions with React

Waldek Mastykarz

Backend as a Service Comparison

Serhiy Snizhny

A Simpler Web App Architecture (jDays 2016)

Gustaf Nilsson Kotte

BladeRunnerJS Show & Tell

Phil Leggetter

Typescript 102 angular and type script

Bob German

Forge - DevCon 2016: Cloud PDM Demystified – The Future of File Management

Autodesk

Rencore Webinar: SharePoint Customizations - the most overlooked road block t...

Rencore

What's hot (20)

Building solutions with the SharePoint Framework - introduction

Polyglot Persistence in Azure

Delivering Rich Content Applications at Scale with Nuxeo & MongoDB Atlas

Azure Functions Overview

Reporting Solution for ASP.NET Application with Telerik reporting

HTML 5

Introduzione a web e servizi con .net e azure

Developing 3D Visualization Apps

What’s right & wrong with WCF-WebHTTP Adapter?

Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016

NextGen Portal for Your Organization

Forge - DevCon 2017, Darmstadt Germany: Integrating Forge Data Management API...

Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...

Building Office 365 solutions with React

Backend as a Service Comparison

A Simpler Web App Architecture (jDays 2016)

BladeRunnerJS Show & Tell

Typescript 102 angular and type script

Forge - DevCon 2016: Cloud PDM Demystified – The Future of File Management

Rencore Webinar: SharePoint Customizations - the most overlooked road block t...

Similar to Creating Data Driven HTML5 Applications

Big Data And HTML5 (DevCon TLV 2012)

Ido Green

Cloud-first SharePoint JavaScript Add-ins - Collab 365

Sonja Madsen

Brian_Caufield_resume_2016

Brian Caufield

Brian Caufield is a full stack developer with over 11 years of experience developing both mobile and web applications. He has extensive experience building mobile apps using Titanium and publishing them to app stores. Some of the apps he developed include an aviation magazine app, a flight planning app, and a shopping app. He also has experience building web APIs, websites, and admin interfaces using technologies like Node.js, PHP, and Angular. His background includes positions developing apps for companies like Time Warner Cable, Ravenglass Technologies, and Folksware Technologies.

Microsoft Silverlight

thinkahead.net

- Silverlight is a browser plugin that allows for rich interactive applications and media experiences across browsers and operating systems. - It uses XAML and .NET languages like C# for development, providing a familiar environment for building rich GUI applications. - A demo showed how Silverlight can be used to build interactive experiences like photo editors and financial charts that run across platforms.

Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)

Ido Green

Introduction to HTML5/CSS3 In Drupal 7

Mediacurrent

HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive rich user interfaces using baked-in techniques and supported by more and more modern browsers. If you have ever wondered about the next emerging technology on the web or need a quick crash course in HTML5 and CSS3 this program is right for you. We will answer the following questions: What is HTML5? How does HTML 4.01/ XHTML 1.0 compare with the new HTML5? What are the new HTML5 structural elements? What do you need to do to build a Drupal 7 theme in HTML5? What is CSS3? What are the new CSS3 properties and techniques? What CSS3 techniques should be used in Drupal? What are some advanced CSS3 techniques? About our speaker: Dante Taylor, Creative Director at Mediacurrent. Dante has his Bachelor of Fine Arts (BFA) from Savannah College of Art and Design, and has worked as a designer for over ten years, starting with the version 4.7 release.

Silverlight Simon Wilkinson

Simon Wilkinson

Simon Wilkinson gave a presentation on Silverlight where he: 1) Discussed why Silverlight is used for advanced content protection and rapid development by abstracting web complexities and leveraging existing .NET capabilities. 2) Explained how Silverlight enables rapid application development through tools like SketchFlow for prototyping and data binding without code. 3) Described Silverlight's enhanced data support features like element to element binding, data forms, and collection views to easily load, sort, filter and page data.

Building your own calendly using amazon app sync

Dhaval Nagar

This document provides an overview and agenda for a webinar on building a Calendly clone using AWS serverless technologies. The webinar will cover the state of serverless computing, key AWS serverless services like AppSync, API Gateway, Lambda, DynamoDB, and Amplify. It will include a live demo of building the backend using AppSync and associated services, followed by a frontend demo using Vue.js and Amplify. The document outlines the architecture of the Calendly clone demo, breaking it into backend and frontend sections. It also includes background information on serverless computing models, GraphQL, and an overview of the webinar content and structure.

On-the-Fly Containerization of Enterprise Java & .NET Apps by Amjad Afanah

Docker, Inc.

Dockerizing brownfield enterprise applications can often be a daunting task - involving changes to the application code/configuration and existing build processes. The DCHQ platform provides “on-the-fly” containerization of both Linux & Windows enterprise applications – including Java, Oracle, .NET and others. By doing so, DCHQ transforms non-cloud-native applications into completely portable applications that can take advantage of cloud scaling, storage redundancy and most importantly, deployment agility without introducing a single change to the application source control repository. In this session, we will cover the deployment automation of an Enterprise Java application with PostgreSQL multi-host cluster set up for Master-Slave replication and automated storage management with redundant EBS volumes on AWS using DCHQ + EMC REX-Ray. We will also cover the deployment automation of an Enterprise .NET application demonstrating the application life-cycle management capabilities post-provision -- including monitoring, alerts, continuous delivery, application backups, scale in/out, in-browser terminal to access the containers, log streaming, and application updates.

Kendo UI workshop introduction - PUG Baltic Annual Conference 2017

Alen Leit

What's Silverlight?

Timmy Kokke

Silverlight is a development platform from Microsoft that allows users to build rich interactive applications for the web, desktop, and mobile using HTML, CSS, and JavaScript. It uses a small plug-in that works across browsers and devices. Silverlight applications can access multimedia and other device capabilities and can run offline. It provides features for graphics, animation, data binding, and more through the .NET framework.

Introduction to html5

Muktadiur Rahman

This document provides an introduction and overview of HTML5. It outlines the key new features and capabilities of HTML5 including structural semantics, web forms, web workers, storage, audio/video, geolocation, web sockets, messaging, history API, drag and drop, and canvas. For each topic, it provides a brief description and links to additional resources for further information. The document aims to cover the major areas introduced in the new HTML5 specification.

Daniel Myers (Snowflake) - Developer Journey_ The Evolution of Data Applications

Techsylvania

This document discusses different types of data applications and considerations for developers. It begins by stating that all applications involve ingesting, transforming, and displaying data. It then outlines three types of data applications: managed apps where the provider stores customer data, connected apps where data resides in the customer's account, and native apps that run directly in the customer's Snowflake account. The document provides examples and reference architectures for each type and compares them based on factors like data location, access, management, and costs. It aims to help developers understand options for building applications that leverage Snowflake's data platform.

#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...

e-Legion

Introduction to silver light

jayc8586

Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...

IndicThreads

Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India WEB: http://M10.IndicThreads.com ------------ Speaker: Romin Irani Abstract: HTML5 is expected to become mainstream soon. It brings a lot of new features that developers can incorporate today. The Webkit browser is currently the best implementation of the HTML5 standards and it is also available on a variety of Mobile devices like iPhone, Android, etc. Mobile Web applications are getting powerful day by day. They have distinct advantages over Native mobile applications. With Webkit available on most Smartphone browsers, you can create powerful mobile web applications today. Combine this with some of the latest HTML5 features, and it makes a compelling alternative available to developers today. This session will give an overview of : a) What mobile web applications are and their pros / cons vis-a-vis Native Mobile applications. b) HTML5 features like geolocation, offline storage, web workers, etc c) How one can use HTML5 features mentioned in (b) to develop mobile web applications today. d) Demonstrate all the above features via code samples. e) Cover challenges involved in making sure that the same code base runs on all mobile browsers in a majority of Smartphones. Takeaway for the audience: a) Knowledge about upcoming HTML5 standards specifically features like geolocation, offline storage, web workers, etc. b) Understand of Mobile Web applications and how we can use HTML5 standards to deliver powerful web applications that are delivered on most smartphones today. c) Challenges involved in making sure that the Mobile Web Applications works well in most browsers across different devices.

Flex In Dot Net

pradeepfdo

FLEX is a programming language for building Rich Internet Applications (RIAs). It allows developers to create Flash applications using code rather than solely through Flash's interface. FLEX integrates with .NET by allowing .NET classes to be exposed and invoked from FLEX applications using technologies like WebORB and remote objects. The document demonstrates how to develop a .NET class, deploy it, create a FLEX application configured to call the .NET class, and run the integrated FLEX/NET application. IBM and SAP endorse FLEX for building visually simple and interactive interfaces that improve the user experience.

Web development concepts using microsoft technologies

Hosam Kamel

This document summarizes a presentation about web development concepts using Microsoft technologies. It introduces ASP.NET as a framework for building web applications in C# or VB.NET using Visual Studio. It describes ASP.NET features like controls, page lifecycle, and different coding styles. It also discusses recent additions like AJAX, jQuery, LINQ, MVC, and the Microsoft web platform. The presentation aims to provide an overview of Microsoft web technologies and how they can help developers build web applications.

Html5 workshop part 1

NAILBITER

HTML5 is the new standard for HTML that provides many new features and capabilities. It is a collaboration between the W3C and WHATWG to develop the next generation of HTML. Some key features of HTML5 include new multimedia elements like <video> and <audio>, local storage options, offline capabilities, and improved graphics capabilities. HTML5 aims to make web development easier across browsers and devices with a single code base.

Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...

Evolve The Adobe Digital Marketing Community

Similar to Creating Data Driven HTML5 Applications (20)

Big Data And HTML5 (DevCon TLV 2012)

Cloud-first SharePoint JavaScript Add-ins - Collab 365

Brian_Caufield_resume_2016

Microsoft Silverlight

Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)

Introduction to HTML5/CSS3 In Drupal 7

Silverlight Simon Wilkinson

Building your own calendly using amazon app sync

On-the-Fly Containerization of Enterprise Java & .NET Apps by Amjad Afanah

Kendo UI workshop introduction - PUG Baltic Annual Conference 2017

What's Silverlight?

Introduction to html5

Daniel Myers (Snowflake) - Developer Journey_ The Evolution of Data Applications

#MBLTdev: Разработка backend для мобильного приложения с использованием Googl...

Introduction to silver light

Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...

Flex In Dot Net

Web development concepts using microsoft technologies

Html5 workshop part 1

Evolve 19 | Sarah Xu & Kanika Gera | Adobe I/O - Why You Need it to Execute o...

More from Gil Fink

Becoming a Tech Speaker

Creating Data Driven HTML5 Applications

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Creating Data Driven HTML5 Applications

Similar to Creating Data Driven HTML5 Applications (20)

More from Gil Fink

More from Gil Fink (20)

Recently uploaded

Recently uploaded (20)

Creating Data Driven HTML5 Applications