12
Building HTML5 Web Apps Lohith G N Telerik

GIDS 13 - HTML5 Web Apps with Kendo UI

Embed Size (px)

DESCRIPTION

My Great Indian Developer Summit 2013 talk on How to create HTML5 based Web Apps using Kendo UI. I created a Single Page Application or SPA using kendo UI Web + Web API in 20 minutes.

Citation preview

Page 1: GIDS 13 - HTML5 Web Apps with Kendo UI

Building HTML5 Web Apps

Lohith G NTelerik

Page 2: GIDS 13 - HTML5 Web Apps with Kendo UI

ABOUT ME

• Developer Evangelist, Telerik India• Microsoft MVP

• @kashyapa• [email protected]

• www.Kashyapas.com• www.Telerikhelper.net

Page 3: GIDS 13 - HTML5 Web Apps with Kendo UI

Telerik at a Glance

• Established in 2002• Telerik is now a leading vendor of productivity tools & solutions• 11 global offices, 700+ people, 100,000+ loyal customers in over 90

countries• 880,000 Registered users in the Telerik Online Community • True global vendor – no vertical or geographical focus• Numerous business awards, hundreds of technology awards

““Deliver More Than Deliver More Than Expected”Expected”

Page 4: GIDS 13 - HTML5 Web Apps with Kendo UI

End to End Provider

Solutions for all aspects of Software Development

Automated Functional & Performance UI Testing

Unit Testing

Load/Stress Testing

Exploratry Testing

Testing

Requirements Gathering

Project Management

Defect Management

Team and Customer Collaboration

Planning

Multi-platform UI tools

Code quality and performance tools

Data access and reporting tools

Construction

Page 5: GIDS 13 - HTML5 Web Apps with Kendo UI

Telerik Product Portfolio

PlanPlan BuildBuild TestTest DeliverDeliverAGILE PROJECT AGILE PROJECT MANAGEMENTMANAGEMENT

DEVELOPER TOOLSDEVELOPER TOOLS QUALITY ASSURANCE QUALITY ASSURANCE TOOLSTOOLS

WEB PRESENCE WEB PRESENCE PLATFORMPLATFORM

Windows Phone*

Sitefinity

OpenAccess ORM

Silverlight

WinForms

Reporting

JustCode

WPF Controls

ASP.NET MVC

JustMock

ASP.NET AJAX*

JustDecompile

TeamPulse

Windows 8*

TestStudio

Page 6: GIDS 13 - HTML5 Web Apps with Kendo UI

LETS BUILD A SPA

In 20 minutes …

Page 7: GIDS 13 - HTML5 Web Apps with Kendo UI

SPA USING KENDO UI

Overview

Page 8: GIDS 13 - HTML5 Web Apps with Kendo UI

Building Blocks

• Router

• View

• Layout

Page 9: GIDS 13 - HTML5 Web Apps with Kendo UI

Router

• Responsible for– Tracking application state– Navigating between application states

• Integrates with history• Uses fragment version of URL• Use route() to define routes• Use navigate(url) to navigate

Page 10: GIDS 13 - HTML5 Web Apps with Kendo UI

Layout

• Inherits from View

• Allows rendering other views/layouts

• Will hide a view when new view is rendered on a location

Page 11: GIDS 13 - HTML5 Web Apps with Kendo UI

View

• A Screen in the app• Content can be

– HTML string – Script template

• By default wraps content in a div element

• Can pass observable as model to view

Page 12: GIDS 13 - HTML5 Web Apps with Kendo UI