MIGRATING FROMDESKTOP TO WEB Ambrose LittleDirector of Product Developmentambrose@infragistics.com linkedin.com/in/ambroselittle

Let me tell you a story about Bob…

Let me tell you a story about Bob…

“Umm.. I’m gonna need you to move to the Modern Web. That would be

great, mkay?”

“I must unlearn what I have learned…”

Not Exactly… Your Core Development Skills Are Portable

Design Patterns & Code Architecture C# or VB.NET? Debugging

You May Be Able to Reuse Your Data & Services Layers

Can Be a Good Time to Reassess Application UX Improve the “Desktop” Experience & Touch-Enablement Consider Phone Scenarios

But what the … is the Modern Web?

Devices, Lots of ThemResponsiveness/

Adaptiveness Touch (First? Ready?

Friendly?)

But what the … is the Modern Web?

Modern Browsers (JS) Application

Frameworks (REST-Like) Web Services

with JSON

We only use IE6…Modern Web Browsers• Chrome• Firefox• IE 10+ (11 or Edge Better)• Safari 6+• Mobile Browsers

Use caniuse.com!

Browser Detection is OutFeature Detection is In (with Polyfills)

https://www.modern.ie/en-us/ie6countdown

http://bit.ly/ie-enterprise

“I’ve heard that JavaScript is total

junk.”

JavaScript – It’s Good Not as Bad as You’ve Heard! Relatively Well Performing Robust When Used Idiomatically Lots of Libraries to Fill in the Gaps The Future is Promising: Evergreen Browsers,

ES6, ES7

https://kangax.github.io/compat-table/es6

KEEP CALM

AND YEE HAW ON!

TAMING THE BEAST

Basic Web App Architectural Constraints

Client Browser

DOM (HTML/CSS)JS Runtime

XMLHttpRequest

Sandboxed

Web/App/Cloud Server

Database(s)

Database(s)

Web Server(s)

Web Server(s)

.NETnode.js

JavaEtc.

HTTP-based CommunicationHTML/CSS/JS, JSON, XML

Two roads diverged in a yellow wood…

Clean separation between client and server.

Single Page Applications (SPA)

SPA Architecture

Web Server(s)

HTTP-based Communication

Web/App Server

Database(s)

Database(s)

Web Server(s)

.NETnode.js

JavaEtc.

JSON, XML

Client BrowserView

Templates

View Controllers

Com

mun

icati

ons

Rout

ing/

Navi

gatio

n

Data Binding

(View) Models

Common SPA Frameworks

igniteui.com/application-samples

Rich SPA Architecture

http://www.asp.net/single-page-application/overview/templates/breezeangular-template

Web Server(s)

HTTP-based Communication

Web/App Server

Database(s)

Database(s)

Web Server(s)

ASP.NET Web APIEntity Framework

Client BrowserAngular

View Templates

View Controllers

Bree

ze.js

(Mod

els &

Se

rvice

s)

Rout

ing/

Navi

gatio

nData Binding

Ignite UI

JSON

A modern server-side Web application framework.ASP.NET MVC Applications

ASP.NET MVC Architecture

http://bit.ly/iggrid-mvc-sample

ASP.NET MVC

SPA and MVC can be BFFs.

ASP.NET MVC + SPA Architecture

http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/

The Future JavaScript, HTML, CSS, and browsers

continue to evolve and improve. New Important Standards:

Web Components (http://webcomponents.org) Shadow DOM Custom Elements HTML Imports

CSS Grid Layout

“It’s all so clear to me now!” Modern Web Apps = Devices,

Modern Browsers, Standards, & JS Frameworks

Two Three Good Choices for Modern Web App Architecture Web Client + API Server ASP.NET MVC Both/Blended

Ignite UI Can Help Make Advanced UIs No Matter Which You Choose

Need a Partner to Help Smooth Your Transition? We Have UX Experts to Reassess and

Improve the User Experience of Your Apps

We Have Modern Web Dev Experts to Train Your Developers & Help Architect Your Apps

You Can Design with Indigo Studio & Ship with Ignite UI

Desktop to Web Application Migration Framework

Whitepaper

Thanks!Ambrose LittleDirector of Product Developmentambrose@infragistics.com linkedin.com/in/ambroselittlewww.infragistics.com/products/jquery