Trabalhando com Front End no  asp.NET Core

Twitter - @faherbert

Github - @fabiodamasceno

Server Rendering ou SPA?

Use npm para gerenciar seus pacotes

Modularize para separar responsabilidades

  • Funções anônimas auto-executáveis
  • Browserify
  • Webpack



    ;(function(window, angular){
      console.log(angular)
      // seu código privado..
    
    }(this, angular))

Funções autoexecutáveis (self invoking function)

    

    import angular from 'angular'
    
    console.log(angular)
    
    //seu código privado..

Módulo

Teste no front não mata ninguem

import chai from 'chai'

chai.should()

describe('Router', () => {
    it('value should be true', () => {
       var value = true
       value.should.be.true()
    })
})

Typechecker também é uma forma de asserção

https://flowtype.org/

Faça um css do BEM :D ou tenha um code style

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}

Block - Element - Modifier

CSS também é feito para animações

Produtividade = browsersync

Build

Obrigado :D

Made with Slides.com