Tweet
Tweet

Slide 1

Slide 1 text

AngularJS Superheroic JavaScript Framework odessa js Saturday, April 13, 13

Slide 2

Slide 2 text

Maksym Klymyshyn CTO at GVMachines Inc. (Zakaz.ua) @maxmaxmaxmax Saturday, April 13, 13

Slide 3

Slide 3 text

Background • Lead both-end developer @oDesk Inc. • Front-end consultant @Helios • OpenSource contributor • Conferences organizer Saturday, April 13, 13

Slide 4

Slide 4 text

Now • With AngularJS on production for internal tool • Understand VALUE of AngularJS for business Saturday, April 13, 13

Slide 5

Slide 5 text

Saturday, April 13, 13

Slide 6

Slide 6 text

TOC • What is AngularJS • Technical details • Numbers and value for business owners Saturday, April 13, 13

Slide 7

Slide 7 text

AngularJS? Saturday, April 13, 13

Slide 8

Slide 8 text

What is it? MVC framework by Google built around belief that declarative programming for building UIs, while imperative programming is excellent for expressing business logic Saturday, April 13, 13

Slide 9

Slide 9 text

Author • Originally written by Misko Hevery • Created at Google as internal project Saturday, April 13, 13

Slide 10

Slide 10 text

Key points • 2-way data binding • dependency injection • directives (custom tags and attrs) • Form validation • RESTful • Binders, watches, events etc. Saturday, April 13, 13

Slide 11

Slide 11 text

Difference • Lack of boilerplate code • Easy-to-create reusable components • Dead simple templates, no way to put business logic • Simple support of UI consistency • All-in-one solution Saturday, April 13, 13

Slide 12

Slide 12 text

It fits well • CRUD applications • CRMs, Admin-panels • Single-page apps • Push-notification-based apps • Mobile apps Saturday, April 13, 13

Slide 13

Slide 13 text

That won’t fly On Jun 8, 4:34 am, ganaraj p r wrote: > There should be some generic set of apps > for which angular would be > considered the wrong choice? > > Anyone figured out what set this would be? Good: Gmail Bad: Wikipedia Saturday, April 13, 13

Slide 14

Slide 14 text

Definitely not the first tool to develop a game Saturday, April 13, 13

Slide 15

Slide 15 text

Technical details Saturday, April 13, 13

Slide 16

Slide 16 text

Bootstrap $ yeoman init angular $ ls Gruntfile.js! ! test app testacular.conf.js package.json Saturday, April 13, 13

Slide 17

Slide 17 text

Bootstrap app/views app/scripts/vendor app/scripts/controllers/ app/scripts/app.js app/index.html Structure Server $ yeoman server Saturday, April 13, 13

Slide 18

Slide 18 text

Saturday, April 13, 13

Slide 19

Slide 19 text

Architecture Saturday, April 13, 13

Slide 20

Slide 20 text

Architecture Saturday, April 13, 13

Slide 21

Slide 21 text

Typical app Saturday, April 13, 13

Slide 22

Slide 22 text

Major parts • Scope • Model • View • Controller • Directive • Filters • Module • Injector • Services Saturday, April 13, 13

Slide 23

Slide 23 text

Scope • Provide context for expressions • Scopes are hierarchical nested • Isolated scopes (for widgets) • Watches The scope detecting changes to the model section and provides the execution context for expressions. Saturday, April 13, 13

Slide 24

Slide 24 text

Scope Saturday, April 13, 13

Slide 25

Slide 25 text

Model Model is view’s data. No requirements. No restrictions Saturday, April 13, 13

Slide 26

Slide 26 text

Model $scope.data = { title: “Test title”, id: 1, content: “Some content” };

{{ data.title }}

{{ data.content }}

Controller: View: Saturday, April 13, 13

Slide 27

Slide 27 text

Model booleans, strings, arrays, objects Saturday, April 13, 13

Slide 28

Slide 28 text

A W E S O M E Saturday, April 13, 13

Slide 29

Slide 29 text

View • View looks like HTML template • It’s declarative • Very close to HTML markup • It handle directives • Update DOM partially Saturday, April 13, 13

Slide 30

Slide 30 text

View

{{ p }}

$scope.content = [ “paragraph 1”, “paragraph 2”, “paragraph 3” ]; Saturday, April 13, 13

Slide 31

Slide 31 text

View Saturday, April 13, 13

Slide 32

Slide 32 text

Controller • Manage application behavior • Support of many views, for example desktop and mobile versions with different views but same controller JavaScript code behind the view Saturday, April 13, 13

Slide 33

Slide 33 text

Controller MyModule.controller('MainCtrl', [ "$scope", function($scope) { $scope.name = "Max"; $scope.content = [ "paragraph 1", "paragraph 2", "paragraph 3" ]; }]); Saturday, April 13, 13

Slide 34

Slide 34 text

Directive • Provide ability to extend HTML • Custom tags, attributes or classes • Bi-directional binding of nested scopes • Async directives processing Directive is a behavior or DOM transformation Saturday, April 13, 13

Slide 35

Slide 35 text

Directive MyApp.directive('message', function factory() { return { template: '
’ + ‘
', replace: true, // replace original tag transclude: true, // put content to template // Element, possible Attr, Class, coMment restrict: 'E' }; }); Saturday, April 13, 13

Slide 36

Slide 36 text

Filters • Very useful with locales • Number formatters, text highlighting and so on Perform data transformation Saturday, April 13, 13

Slide 37

Slide 37 text

Filters MyApp.filter('title', function factory() { return function (input) { var ch = input.substring(0, 1); var rest = input.substring(1, input.length); return ch.toUpperCase () + rest; }; }); Saturday, April 13, 13

Slide 38

Slide 38 text

Module Services, directives, filters, and configuration var MyApp = angular.module('MyApp', []) .config([ '$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/' }); }]); Saturday, April 13, 13

Slide 39

Slide 39 text

Injector Service locator, Dependency Injection pattern Saturday, April 13, 13

Slide 40

Slide 40 text

Why? Minification $ yeoman build ... # Error: Unknown provider: aProvider <- a ... 'MainCtrl', ["$scope", function($scope) { ... ... 'MainCtrl', function($scope) { ... Wrong Correct Saturday, April 13, 13

Slide 41

Slide 41 text

Services • $compile - dynamic views compilation from string • $cookies - read/write cookies • $locatoin - work with browser’s location • $resource - factory to work with third- party services/REST Saturday, April 13, 13

Slide 42

Slide 42 text

Toolchain • End-to-end - e2e testing, similar to Jasmine • Yeoman - dev & build server, projects skeleton • Batarang - plugin for Chrome • Testicular - tests framework Saturday, April 13, 13

Slide 43

Slide 43 text

Saturday, April 13, 13

Slide 44

Slide 44 text

Third-party apps • Angular-UI • Anglebars.js • jQuery mobile + Angular.js • ngGrid Saturday, April 13, 13

Slide 45

Slide 45 text

Saturday, April 13, 13

Slide 46

Slide 46 text

Show me the money Saturday, April 13, 13

Slide 47

Slide 47 text

Rapid prototyping • No boilerplate code === less code to maintain • Simple tests suite === more motivation to write more tests • Two-way data binding === easy to develop push-based services, like PBX<->CRM, chats, notifications etc. Saturday, April 13, 13

Slide 48

Slide 48 text

Structured by design • Well structured codebase by design • Easy-to-understand templates • Fast and maintainable prototypes may become fast hypothesis check and robust solution. Recommended for startups Saturday, April 13, 13

Slide 49

Slide 49 text

Localytics refactoring Moved from Backbone to Angular http://www.localytics.com/blog/2013/angularjs-at-localytics/ Saturday, April 13, 13

Slide 50

Slide 50 text

Community • 7001 followers on github • 1158 forks! • 1619 closed issues • 391 open issues • 9371 followers on twitter • 316 videos on YouTube • 127 presentations on SlideShare Saturday, April 13, 13

Slide 51

Slide 51 text

Text AWESOME Saturday, April 13, 13

Slide 52

Slide 52 text

Thanks. Questions? Saturday, April 13, 13