Tag Archives: constructie de site-uri

Constructie de taguri proprii de HTML + video

Ma uitatm la o conferinta a unui umanoid despre Internetul curent si despre productia de website-uri si aplicatii mobile. Am extras unele idei din filmul de mai jos:

  • Apar din ce mai multe unelte si totul devine complex: Boilerplate, Abstractions, Frameworks, testing, Docs, Workflow, Dependency, management, Performance, optimization, Build, Continuous Integration, Deployment, Version control
  • Timpul este factorul chei in a fi productiv => Automatizeaza sarcinile repetitive pentru a fi eficient. Automatizarea nu inseamna sa fi lenes, fii doar eficient.
  • Un flux de lucru (workflow) mediu de front-end arata asa:
    • Instalare (setup): Scaffolding, Download libraries, Download template, Download frameworks
    • Dezvoltare (develop): Urmareste Sass, Less, Stylus; Urmareste CoffeeScript, Jade, Haml; Verificare online (LiveReload), JS/CSS Linting
    • Implementare (duild): Code linting, rulare unit-uri de test, compilarea codului, minificare (minify) si concatenare, generare de imagini si iconite, Optimizarea performantei

    Se poate folosi o unealta Yeoman = Yo + Grunt + Bower.
    Grunt = unealta pentru constructie, previzualizare si testare.
    Bower = managementul dependintelor
    Yo = scriere mai putina de cod si mai mult “Scaffolding”
    Intrebari despre Yeoman: Este flexibila? Este gata pentru productie? Este buna si in viitor?

  • Polymer-project.org: construit pe 4 nivele: Template-uri, Importuri HTML, Elemente personalizate, Shadow DOM

Conferita Addy Osmani la dotJS 2013

Cateva caracteristici (features) ale aplicatiei Polymer:

  • Declaratie de Inregistrare de Element: <polymer-element>
  • Declaratie de mostenire: <polymer-element extends=”…”>
  • Declaratie date de legare (data-binding) în ambele sensuri (two-way): <input id=”input” value=”{{foo}}”>
  • Declaratie gestionar de eveniment: <button on-click=”{{handleClick}}”>
  • Publicare de proprietati: xFoo.bar = 5 <-> <x-foo bar=”5″>
  • Observatori modificari de proprietati: barChanged: function() {…}
  • Localizare automata de nod: this.$.input.value = 5