Optimizing AngularJS Application – Chi siamo – di giorno

View Github Repository Open presentation in a new window

h2baik

See all presentation from h2baik

Optimizing AngularJS Application – Chi siamo – di giorno

0 0

angular-opti

On Github h2baik / angular-opti

Optimizing AngularJS Application

Pierre Guilbert & HyoHyun Baik

RTB dev-ops

Chi siamo

di giorno

Chi siamo

di notte

Superheroic JavaScript MVW Framework  

HTML enhanced for web apps!  

AngularJS is what HTML would have been, had it been designed for building web-apps.

C'era una volta...

2009 @ Google Inc.

Google Feedback

  • 6 mesi di progetto
  • 17.000 linee di codice front-end
  • sviluppo lento
  • codice poco testabile

Frustrazione

Misko Hevery

Misko Hevery

dice di voler riscrivere l'intero progetto

da solo

in 2 settimane

con una libreria open-source che ha creato lui per hobby

Misko Hevery

Fallisce

ci mette 3 settimane

porta le linee di codice da 17.000 a 1.500

AngularJS

progetto patrocinato da Google

394 contributors in tutto il mondo

su GitHub sotto MIT License

Concetti

  • Client-Side Templates
  • Model View Controller
  • Data Binding
  • Dependency Injection

Client-Side Templates

Server-Side Templates

  • Il server assembla i dati e il markup
  • Il browser riceve l'HTML e lo mostra

Client-Side Templates

  • Il server invia dati e markup
  • Il browser assembla l'HTML e lo mostra

Confronto

Server-Side Templates

<table>
    <tr>
        <td>Totale:</td>
        <td>1000 €</td>
    </tr>
</table>

Client-Side Templates

<table>
    <tr>
        <td>Totale:</td>
        <td>{{total}} €</td>
    </tr>
</table>
                        
{total: 1000}

Esempio

index.html

<html ng-app><head><script src="angular.js"></script><script src="controllers.js"></script></head><body><div ng-controller='GreetingCtrl'><p>{{greeting.text}}, World!</p></div> </body></html>

controller.js

functionGreetingCtrl ($scope) {$scope.greeting = { text: 'Hello' };}

Model View Controller

Vantaggi

  • modello mentale su dove posizionare il codice
  • facilità per chi deve capire cosa c'è scritto nel codice
  • applicazione più estendibile, manutenibile e testabile

MVC in AngularJS

ViewControllerModelDOMFunzioneOggetto