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.

1. Building HTML5 Web Apps
Lohith G N
Telerik

2. ABOUT ME
• Developer Evangelist, Telerik India
• Microsoft MVP
• @kashyapa
• Lohith.Nagaraj@telerik.com
• www.Kashyapas.com
• www.Telerikhelper.net

3. 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 ThanDeliver More Than
Expected”Expected”

4. 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

5. Telerik Product Portfolio
PlanPlan BuildBuild TestTest DeliverDeliver
AGILE PROJECTAGILE PROJECT
MANAGEMENTMANAGEMENT
DEVELOPER TOOLSDEVELOPER TOOLS QUALITY ASSURANCEQUALITY ASSURANCE
TOOLSTOOLS
WEB PRESENCEWEB 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

6. LETS BUILD A SPA
In 20 minutes … 

7. SPA USING KENDO UI
Overview

8. Building Blocks
• Router
• View
• Layout

9. 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

10. Layout
• Inherits from View
• Allows rendering other views/layouts
• Will hide a view when new view is
rendered on a location

11. 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