Frontend Best Practices 2017

Image Source: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

Jan Widmer

Frontend Engineer, Namics AG

Frontend @ Namics

Frontend

Projektablauf

  • Problematik Code Bases
  • "Integriertes" Frontend

Statisches Frontend

Integration ins Backend

Generator Nitro

https://github.com/namics/generator-nitro

  • Frontent Prototype Tool
  • Verwendung
    • Integration in unsere CMS Backends
    • Als Pattern Library
    • Für Microsites

Yeoman

Node.js

Handlebars

Less / SCSS

TerrificJS

TerrificJS

  • Modularisierung
  • Application Lifecycle

https://github.com/brunschgi/terrificjs/

Standards

  • Javascript ES2015
  • Code Reviews
  • Atomic Design

Atomic Design

Image Source: http://atomicdesign.bradfrost.com/

Tooling

  • Gulp / Webpack
  • Stylelint / ESlint
  • Babbeljs

https://github.com/namics/eslint-config-namics

https://github.com/namics/stylelint-bem-namics

React vs. Angular

Image Source: https://gofore.com/en/angular-2-vs-react-the-final-battle-round-1/

Image Source: https://cdn.meme.am/cache/instances/folder168/64728168.jpg

React vs. Angular

React

Angular2

Geeignet bei

  • Hohe Komplexität
  • Viele Dom Changes
  • closed App
  • Forms
  • Animationen
  • Komplexes Routing

Ausblick 2017

  • ES Next
  • Webpack
  • Typescript / Flow
  • HTML Linting

Image Source: http://dzmitry-varabei.github.io/front-end-course/lecture-1-history/images/framework.png

Danke

https://slides.com/jwidmer/fe-best-practices

      @jan_widmer

https://www.namics.com/person/jan-widmer/

https://www.widmer-web.ch/

Frontend Best Practices 2017

By Jan Widmer

Frontend Best Practices 2017

Lightning Talk über Frontend Best Practices bei Namics

  • 780