A brief explanation on VS2015, Angular2, Typescript, Nodejs, Gulp, Sass, Compass and Foundation

A brief explanation about a full project using

  • Visual Studio 2015
  • Angular 2
  • Typescript
  • Nodejs
  • Gulp
  • Sass
  • Compass
  • Foundation

Build process

Typescript, node, gulp

  • Typescript build process: Visual Studio (tsconfig.js)
    • Tsconfig define the configuration for the target compilation
    • Typescript files (.ts) are transcompiled to .js and .map
    • Chrome understand that you are using Typescript and allow you to debug typescript file (mapping ts > map > js)
    • Typescript is “type safe” so it need a “Definition file” (.d.ts) for external library and external definitions
  • Nodejs install required packages (package.json)
    • Folder /node_modules/
  • Gulp use Nodejs package for creating Tasks (gulpfile.js)
    • Gulp use pipes
    • Require modules
    • Task definition like “clean:js”, “clean:css”, “min:js”, “min:css”, “compile sass”
    • Task definition like “clean” that use “clean:js” and “cleas:css”
  • Gulp compile SASS in CSS (Foundation + compass + custom sass => css)
    • In TFS we have some custom build settings

 

Typescript

Typescript is “javascript superset, type safe, object-oriented programming

  • Javascript superset
    • Every javascript code is valid
    • “Var” keyword
  • Type safe
    • Valid types
      • let, const
      • boolean,
      • number,
      • string, array  number[],
      • tuple  [string, number],
      • enum,
      • void,
      • Function
    • Casting
      • let someValue: any = “this is a string”;
      • let strLength: number = (<string>someValue).length;
    • “Unsafe” type: any
  • OOP
    • Interfaces (an interface can extends multiple interfaces)
    • Optional parameters
    • Readonly properties
    • Indexable types
    • Class
    • Inheritance
    • Public/private/protected modifiers (public by default)
    • This
    • Arrow functions

This and arrow functions

An example:

let deck = {

suits: [“hearts”, “spades”, “clubs”, “diamonds”],

cards: Array(52),

createCardPicker: function() {

// NOTE: the line below is now an arrow function, allowing us to capture ‘this’ right here

return () => {

let pickedCard = Math.floor(Math.random() * 52);

let pickedSuit = Math.floor(pickedCard / 13);

return {suit: this.suits[pickedSuit], card: pickedCard % 13};

}

}

}

let cardPicker = deck.createCardPicker();

let pickedCard = cardPicker();

alert(“card: ” + pickedCard.card + ” of ” + pickedCard.suit);

SASS

CSS with superpowers: is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

  • CSS compatible
  • Variables
    • An example:

$primary-color: #333;

body {

color: $primary-color;

}

  • Nesting
    • An example:

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

}

}

compiled ⇒

nav ul {

margin: 0;

padding: 0;

list-style: none;

}

  • Partials/import
  • Mixins

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box {

@include border-radius(10px);

}

compiled ⇒

.box {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

border-radius: 10px;

}

  • Extend/inheritance

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

  • Operators

width: 300px / 960px * 100%;  width: 31.25%;

Foundation 6

Responsive front-end framework, mobile first (like Bootstrap)

  • Use SASS
  • Configurable by settings file

COMPASS

SASS extensions ready to use

#border-radius {

@include border-radius(25px);

}

#border-radius-top-left {

@include border-top-left-radius(25px);

}

Atomic OOBEMITSCSS

Best practice useful to write CSS

  • CSS style class definition
  • Block, Element, Modifier
  • Object-Oriented CSS
  • Inverted Triangle CSS

Angular 2

Completely different from angular 1, use typescript natively

  • Use typescript features like decorators (metadata)
  • Use Systemjs to load application and library modules
  • Use zone, don’t have $digest cycles (@input, @output)
  • More rules, more strict
  • RC5 use ngModules (new)

Some “components”:

  • Bootstrap
  • Components
  • Templates
  • Services
  • Pipes (ex filters)
  • Events
  • Dependency Injection
  • Barrels (index.ts)
  • Rxjs library not included (promise helpers)

angular2-main-view

  • Component: application logic + view (template)

component-tree

component-databinding

dependency-injection

  • Template: html + AG2 directives  inline inside the component or an external file

databinding

parent-child-binding

  • Pipes (Angular 1 filters)
    • price | currency:’USD’:true  displays a price of “42.33” as $42.33

  • Dependency Injection

constructor(private service: HeroService) { }

we define them in app.component.ts (available everywhere)

providers: [

BackendService,

HeroService,

Logger

],

injector-injects

Some useful links

Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *