Slide deck from my presentation held on Jun 6 as part of Telerik .NET Ninja Webinar Series.

1. Building SPA
with
Kendo UI
THE WAY OF HTML5

2. Introductions
Lohith G N
Dev Evangelist, Telerik
Lohith.nagaraj@telerik.com
@kashyapa
www.kashyapas.com
www.telerikhelper.net

3. SPA
What is it ?

5. What is SPA ?
• Stands for Single Page Applications
• Web App that fits on single page
• Fluid UX
• Loads all necessary code with single page
load

6. Why SPA
• Reach
• Rich User Experience
• Reduced Round Trips

7. Kendo UI
One Package, Infinite Possibilities

8. In a Nutshell
• JavaScript Library
• Based on jQuery
• HTML5
• CSS3
• UI Framework Solution
– Desktop
– Mobile

9. Why Kendo UI?
• A Single Package
– UI Widgets
– Framework
– Modular
• Data Binding
– Data Source
– MVVM
• Data Visualization
• Native-Like & Hybrid Mobile Apps
• Latest Web Standards
• Aggressive Release Schedule

10. Kendo UI Packages
Web
• UI Widgets
• Framework
• Browsers
• Desktop
• Mobile
DataViz
• Visualizations
• Charts
• Gauges
Mobile
• Hybrid Apps
• HTML & CSS
• Native UI
Kendo UI Complete
Kendo UI Complete Wrappers

11. Kendo UI Web
• UI Widgets
– Grid, Menu, TabStrip, Editor etc.
• Client-Side Data Source
• MVVM
• Templates
• Drag & Drop
• Animations
• Built-In Touch Support

12. SPA USING KENDO UI

13. SPA Building Blocks
• Router
• View
• Layout

14. Router
• Responsible for
– Tracking application state
– Navigating between application states
• Integrates with history
• Uses fragment version of URL
• Use
– route() to define routes
– navigate(url) to navigate

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

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

17. WHAT ARE WE BUILDING
preview

18. Northwind Category Catalog

19. Northwind Product Catalog

20. Northwind Supplier Catalog

21. DEMO
Lets see some action!

22. Thanks!
Q & A