Integrating SignalR Easily in

your HTML5 Applications with

Kendo UI

Agenda

•What is ASP.NET SignalR ?

•What is Kendo UI?

•Kendo UI + SignalR?

Real-Time Web???

What is Real-Time Web ?

Ability to have

Server Push Content to Connected Clients instantly as it becomes available

Rather

Than having the server wait for a Client to Request new Data

ASP.NET SignalRIntroduction

What is ASP.NET SignalR ?

•ASP.NET Library

•Real-Time Web Functionality to Applications

•Simplified for Developers

How ?

•Simple API

•Allows to create Server-to-Client RPC

•Call JS functions in browers/clients from .NET Code

•Connection Management API• Handled automatically

Why use SignalR?

•Anytime the user needs to refresh the screen

•Dashboards and monitoring

•Collaborative anything

• Job progress

•Gaming

Real-Time with SignalR

Real-Time with Older Servers or Clients

Here’s some data!

Real-Time with SignalR on Newer Servers/Clients

Yeah, dude!

SignalR Hubs

Clients.All.doWork()Clients.Caller.doWork()Clients.Others.doWork()

SignalR Fallback

Long Polling

Forever Frames

Server Sent Events

Web Sockets

SignalR is a series of abstractions around a

few persistent HTTP techniques

DEMO

Fast, Light, Complete70+ jQuery-based UI widgets in one toolset

JS Framework Agnostic | No lock in

AngularJS Integration | Bootstrap Theme

Extensive Data Visualization Support

Mobile Specific Widgets | App Tooling

Touch Support | Adaptive Rendering

Modern Comprehensive HTML5/JS Framework

Why Kendo UI?Everything you need, in one neat package

What's in the Box?The different parts of Kendo UI

Application Framework

Web UI

Mobile UI

Data Visualization

Web UI30 Widgets (and growing...)

AutoComplete

Button

Calendar

ColorPicker

ComboBox

DatePicker

DateTimePicker

DropDownList

Editor

Grid

ListView

MaskedTextBox

Menu

MultiSelect

Notification

NumericTextBox

PanelBar

PivotGid

ProgressBar

Scheduler

Slider

Sortabl

e

Splitter

TabStrip

TimePicker

ToolBar

Tooltip

TreeView

Upload

Window

Mobile UIA complete application toolset for building hybrid and mobile web applications

ActionSheet

ButtonGroup

Drawer

Forms

ListView

MobileButton

ModalView

NavBar

PopOver

Scroller

ScrollView

SplitView

Switch

TabStrip

Data VizualizationCharts / Graphs/ Other Visuals

Area Charts

Bar Charts

Barcode

Box Plot Charts

Bubble Charts

Bullet Charts

Chart API

Diagram Donut

Charts

Funnel Charts

Gantt

Line Charts

Linear Gauge

Map

Pie Charts

Polar Charts

QR code

Radar

Charts

Radial Gauge

Range Bar

Charts Scatter

Charts

Sparklines

Stock Chart

TreeMap

Waterfall Charts

KendoUI is everything for building web and

mobile apps with HTML5 and JavaScript

• Fast, light, complete

• 70+ jQuery-based UI widgets in one powerful

toolset.

• AngularJS integration, Bootstrap support, mobile

controls, offline data solution.

KendoUI

It all starts here

http://www.telerik.com/kendo-ui

DEMO

Kendo UI

• http://www.telerik.com/kendo-ui

Demos

• http://demos.telerik.com/kendo-ui/

Asp.NET SignalR On GitHubhttps://github.com/SignalR/SignalR

Projects using SignalRhttps://github.com/SignalR/SignalR/wiki/Projects-Using-SignalR

Thank You