AngularJs - From Heedless Meddler to Superheroic Assistant
-
Upload
milos-boskovic -
Category
Software
-
view
63 -
download
0
Transcript of AngularJs - From Heedless Meddler to Superheroic Assistant
![Page 1: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/1.jpg)
AngularJs evolution - from heedless meddler to superheroic assistant Miloš Bošković
FullStack 2016
![Page 2: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/2.jpg)
About me› Lead Frontend Engineer› Used to be Fullstack developer –
Laravel + jQuery/AngularJs› From 2013 moved entirely to
AngularJs
› Work from home from Niš, Serbia
FullStack 2016
![Page 3: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/3.jpg)
› Tool giving you a complete insight into your business
› Startup based in London (but also worldwide) › Started around December 2013 › Around 15 people involved in the project › Backend built on Java Apache Spark and
MongoDB› Frontend built on AngularJs 1.x
FullStack 2016
![Page 4: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/4.jpg)
FullStack 2016
![Page 5: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/5.jpg)
› Superheroic JavaScript MVW Framework
› MVW -> Model-View-Whatever › Created in Google› Started off as a tool for designers
FullStack 2016
![Page 6: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/6.jpg)
Angular Terminology› $scope / $rootScope› $apply› Services› Factories › Providers› Directives
› DDO› Compile› Link› Pre-link
› Post-link› Require› Transclude (?!?)
› Config / Run› Filters› Modules› $broadcast / $emit
FullStack 2016
![Page 7: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/7.jpg)
How do we benchmark frontend frameworks?
FullStack 2016
› With To-do applications!› Frontend framework test
![Page 8: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/8.jpg)
The code
FullStack 2016
![Page 9: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/9.jpg)
Early Angular FullStack 2016
![Page 10: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/10.jpg)
Less early Angular FullStack 2016
![Page 11: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/11.jpg)
Starting to make sense… FullStack 2016
![Page 12: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/12.jpg)
Getting nicer… (v1.5) FullStack 2016
![Page 13: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/13.jpg)
Now we’re talking! (v1.5, ES2015) FullStack 2016
![Page 14: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/14.jpg)
Future’s looking bright! (v2.0) FullStack 2016
![Page 15: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/15.jpg)
Let’s compare... FullStack 2016
![Page 16: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/16.jpg)
Let’s compare... #2 FullStack 2016
![Page 17: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/17.jpg)
Getting back to Angular 2.0 FullStack 2016
![Page 18: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/18.jpg)
Movie vs Real programming
FullStack 2016
![Page 19: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/19.jpg)
You should do the same!
› Find your own “evolution”› Always try to implement something new› Start with ES2015› Refactor your code so that it relies on
directives/components (and in that way get ready for Angular 2)
› Share the knowledge
Conclusions
FullStack 2016
› Angular has come a long way› It has grown, improved – evolved
![Page 20: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/20.jpg)
Useful links
› https://angularjs.org/ › https://angular.io/ (Angular 2.0)› https://github.com/johnpapa/angular-styleguide › http://devchat.tv/adventures-in-angular/ (Angular podcasts) › http://jsfiddle.net/misaizdaleka/U3pVM/26080/ (to-do app)› https://www.destroyallsoftware.com/talks/wat (JS wat, 5-minute
video)› https://www.youtube.com/watch?v=M_Wp-2XA9ZU (AngularJs
wat)› http://hackertyper.com/
FullStack 2016
![Page 21: AngularJs - From Heedless Meddler to Superheroic Assistant](https://reader036.fdocuments.in/reader036/viewer/2022070519/58f2e7351a28ab93328b459d/html5/thumbnails/21.jpg)
Thanks!
[email protected]/misaizdaleka@misaizdalekaDev
Link to this presentation: http://bit.ly/angular-superassistant