From XAML/C# to HTML/JS

Michael Haberman

Join  the  conversa.on  on  Twi1er:  @DevWeek  #DW2015  

The  web  trend  • Web  has  became  very  popular  

•  Going  from  .net  under  the  roof  of  Microsoft  to  the  open  web  under  the  roof  of  the  community  it’s  a  huge  leap.  

First  time  you  open  web  project  in  VS  

I  can  handle  it,  it  only  JS……  

How  can  we  leverage  our  knowledge?  • MVVM  (data-­‐binding,  commanding  and  etc..)  

•  OOP  

•  The  way  we  tackle  requirements

 

JS  &  HTML  differences  • Many  libraries  

• Many  IDEs  

•  Open  source  –  community  support  

•  It  doesn’t  compile    

•  Doesn’t  have  MVVM  by  nature  

•  OOP?  What  is  that?  

Let’s  Choose  MVVM  Framework  

Let’s  Choose  IDE  

Our  session    focus  •  TypeScript  •  Compile  

•  OOP  

•  Knockout:  •  Implement  MVVM  Pattern  

Type  Script  –  lets  make  it  compile!    •  Compiles  your  Javascript  Code!!  

•  Compile  time  errors  

•  Intellisense  

•  Type  validation  

Type  Script  –  let’s  make  it  compile!    

Libraries  Type  

Script  file   Compiles   Converted  into  JS  

Demo  •  TypeScript  

Our  session    focus  •  TypeScript  •  Compile  

•  OOP  

•  Knockout:  •  Implement  MVVM  Pattern  

TypeScript  -­‐  OOP    •  Classes  •  Inheritance  

•  Access  Modifiers  

•  Interfaces  

•  Overriding    

•  Properties  

•  Generics    

Demo  •  TypeScript  –  let’s  see  some  OOP  

TypeScript  -­‐  class  

export  class  Animal  {            static  IDCounter  =  0;            public  ID  :  number;          public  Name  :  string;                    constructor(name  :  string,  age?  :  number  ){                  this.Name  =  name;    }            public  Sleep()  :  boolean{                  return  true;          }    }  

TypeScript  -­‐  Inheritance  

export  class  Dog  extents  Animal{          Bark(volume  :  number)  :  bool{                    return  false;      }      }  

TypeScript  -­‐  Access  Modifiers  

export  class  Dog  extents  Animal{        public  TaliLength  :  number;  

   private  _id  :  string;        protected  type  :  string;  //  available  from  ts  1.3  

   }  

TypeScript  -­‐  Interfaces  

Interface  IFlyable{  

   fly(height  :  number)  :  void;  

}  

 

Function(flyable  :  Iflyable){      flyable.fly(“123123”)  //  compiler  error  }  

 

TypeScript  -­‐  Overriding  

export  class  FlyingAnimal  extends    Animal{          public  Fly()  :  number{                  alert('7');                  return  7;          }  }    

export  class  Duck  extends    AquaticAnimal{          Fly(){                  alert('I  am  flying!!');          }  }  

TypeScript  -­‐  Properties  

_age  :  number;    

get  Age  :  number  {Return  _age;}    set  Age(value  :  number)  {        if(value  >  0)  {this._age  =  value;}  }  

 

TypeScript  -­‐  Generics  

class  List<T>{  

     Add(T)  {…}  

     Get(index:  number)  :  T  {…}  

}  

 

TypeScript  with  other  frameworks  •  *.d.ts  file  –  contains  all  the  definition  of  the  framework  

•  https://github.com/borisyankov/DefinitelyTyped  

 

Our  session    focus  •  TypeScript  •  Compile  

•  OOP  

•  Knockout:  •  Implement  MVVM  Pattern  

Let’s  get  started  with  Knockout  

MVVM  Features  •  Data  Binding  •  Converter  •  Mode  

•  INotifyPropertyChanged  

•  Command  •  Passing  a  parameter  

•  Context  Binding  

Demo  •  Setup  Knockout  with  TypeScript  

Setting  DataContext  Knockout  

C#  

var  vm  =  new  MySampleAPP.MainViewModel()  

ko.applyBindings(vm);  

DataContext  =  new  MainViewModel();  

Binding  an  element  Knockout  

XAML  

<input  type="text"  data-­‐bind="value:  FirstName"/>  

<TextBlock  Text="{Binding  FirstName}"/>  

Visibility  bound  to  ViewModel  Knockout  

XAML  

data-­‐bind="if:  HasLoggedinUser”  

data-­‐bind="visible:  Status()  ==  'Working'"  

Visibility="{Binding  HasLoggedinUser,  Converter={StaticResource  Converter}}"/>  

Commands  Knockout  

XAML  

<input  type="button"  data-­‐bind="click:  ChangeUser,  valueUpdate:'input'"/>  

 <Button  Command="{Binding  ChangeUser}"/>  

Iterate  through  collections  -­‐  XAML  

 <ItemsControl  ItemsSource="{Binding  Collection}"  >  

                       <TextBlock  Text="{Binding  Name}"/>  

</ItemsControl>  

Knockout  collections  

 public  Employees:  KnockoutObservableArray<Employee>  =  ko.observableArray([]);  

Iterate  thought  collections  -­‐  Knockout  

<table  data-­‐bind="if:  HasLoggedinUser">  

   <tbody  data-­‐bind="foreach:  Employees">  

         <tr>  

             <td><span  data-­‐bind="text:  Name"></span></td>  

         </tr>  

   </tbody>  

</table>  

New  style  converters  

self.SalaryState  =  ko.computed(()  =>  {  

       …  

     return  “red”;                          });  

<span  data-­‐bind="text:  Salary,  style:  {  color:  SalaryState()}"  ></span>  

Knockout  context  binding  •  Similar  to  relative  source  or  element  binding:  •  $parent  -­‐  $parent[indexer]  •  $root  •  $element  

Our  session    focus  •  TypeScript  •  Compile  

•  OOP  

•  Knockout:  •  Implement  MVVM  Pattern  

What  next?  •  Go  home  and  start  develop  in  the  web  environment  

•  Use  your  OOP  knowledge  using  TypeScript  

•  Try  other  frameworks  also  (Angular,  backbone,  ember)  

•  They  all  work  with  TypeScript  

Now  we  are  not  afraid!  

Questions?  

Thank  you!  

michaelh@sela.co.il  http://blogs.microsoft.co.il/michaelh/  Twitter:  @hab_mic