Silverlight is dead! Long live MVVM! [email protected].

36

Transcript of Silverlight is dead! Long live MVVM! [email protected].

Page 1: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.
Page 2: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Silverlight is dead!Long live [email protected]

Page 3: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

A long time ago…

Page 4: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

… when all we had

were Win Forms…

Page 5: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

… Microsoft released

Silverlight/WPF

Page 6: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

What’s changed?

Page 7: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Declarative UI (XAML)

Page 8: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

UI thread belongs to the UI

Your Weather App is not responding

Page 9: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

UI thread belongs to the UI

Page 10: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Non absolute layouts

Page 11: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

MVVM & Data Binding

View Model

View Model

Page 12: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

MVVM – Model View ViewModelBoring diagrams

Page 13: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Separated presentation

DomainObjects

View

Presentation Logic

Page 14: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Different responsibilities

DomainObjects

View

Presentation Logic

User name cannot be empty

When user name entry is empty,

disable submit button

Page 15: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

MVVM - Structure

Invoke Commands

Change notifications

Page 16: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

DEMO TIME

Page 17: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Old (ancient) idea

Page 18: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

View Model!=

Code Behind

Page 19: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

DEMO TIME

Page 20: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

This MVVM thing is pretty cool.

Silverlight RULEZ!

Page 21: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Silverlight is D E A D !

Page 22: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Silverlight is dead – O RLY?

• Silverlight 5 is a complete platform– Support through 10/12/2021

• WP 7.5/8• WPF

• Yup, it is pretty dead on the web…

Page 23: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.
Page 24: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.
Page 25: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Domain Objects

Separated presentation in a browser

Page 26: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

View Model

View Model

MVVM in the browser

Page 27: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

1032 pages

172 pages

Page 28: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

View Model

View Model

MVVM in the browser

?

Page 29: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Simplify dynamic JavaScript UIs by

applying the Model-View-View Model

(MVVM) pattern

Declarative

Bindings

Automatic UI

Refresh

Dependency

TrackingTemplating

Page 30: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

DEMO TIME

Page 31: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

KnockoutJS Demo

• MVVM pattern– Data binding– Observables– Commands

• Custom bindings

• Promises and Deferred objects

Page 32: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Final (almost) thoughts

• Silverlight is dead (on the web)!

• JavaScript is here to stay… we need client side code…

• JavaScript has good parts– Object oriented– Functional– Dynamic

Page 33: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Final thoughts• There is more to explore and learn

– HTML5, CSS3– REST, JSON– Web Sockets– Web Storage– Worker Threads– Canvas– Audio/Video

Page 34: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Technology changes – focus on principles

Page 35: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.

Knockout @ Making WavesActivity Feed (activityfeed.codeplex.com)

Forms Designer

Page 36: Silverlight is dead! Long live MVVM! maciej.grzyb@makingwaves.pl.