Angular replacements for jQuery-based libraries

Angular directives are not meant to be used for jQuery wrappers but for full featured reusable web components

Transcript

1. Angular replacements for jQuery-based libraries ! AngularJS Meetup Berlin, 8.01.2014
2. Tymon Tobolski @iteamon github.com/teamon
3. Angular changed the way we think of client side javascript
4. Dark ages jQuery as polyfill for broken browsers ! tons of various features ! libraries “based on jQuery"
5. Browser support jQuery 2.0 - no more IE <9 angular IE8+
6. Native JS APIs are pretty good and supported jQuery(“meta[name=csrf]”).attr(“content") jQuery(“.someClass”) $.each, $.map document.querySelector(“meta[name=csrf]”).getAttribute(”content”) document.getElementsByClassName(‘someClass”) Array.forEach, Array.map vs
7. angular.element / jqLite addClass() after() append() attr() bind() children() clone() contents() css() data() empty() eq() find() hasClass() html() next() on() off() one() parent() prepend() prop() ready() remove() removeAttr() removeClass() removeData() replaceWith() text() toggleClass() triggerHandler() unbind() val() wrap() Most not really needed at all
8. How angular apps look like today * from Ruby programmer perspective
9. Services! Controllers! Filters! Directives
10. Services! Controllers! Filters! Directives GOOD! GOOD! GOOD! POOR
11. Directive == jQuery wrapper
12. Most jQuery wrappers are very hackish
13. Angular beginners think directives are magic
14. Directive != ! jQuery wrapper
15. Let’s talk about Real World
16. Existing solutions angular-ui.github.io/bootstrap! kendo-labs.github.io/angular-kendo! bazalt-cms.com/ng-table github.com/danialfarid/angular-file-upload
17. jquery-ujs (rails) <a href="..." data-method="delete" data-confim="Are you sure?"/> XHR DELETE + window.confirm() ! ! XHR form submission ~400 LOC
18. angular-ujs <a href="..." data-method="delete" data-confim="Are you sure?"/> XHR DELETE + window.confirm() ! ! XHR form submission 40 LOC github.com/monterail/angular-ujs
19. date range picker impossible and crazy to write by yourself ! ! !
20. date range picker impossible and crazy to write by yourself ! based on moment and moment-range! ! two way sync: UI ⁵ $scope
21. Interface
22. app.controller("TestCtrl", function($scope){ $scope.range = moment().range("2014-01-08", "2014-02-22") } <date-range-picker ng-model="range"></date-range-picker> Code github.com/monterail/angular-date-range-picker
23. <div ng-show="visible" ng-click="handlePickerClick($event)"> <div> <button ng-click="move(-1, $event)">&#9664;</button> <div ng-repeat="month in months"> <div>{{ month.name }}</div> <table> <tr> <th ng-repeat="day in month.weeks[1]”> {{ day.date.format(‘dd') }} </th> </tr> <tr ng-repeat="week in month.weeks"> <td ng-class=‘{ "selected": day.selected, "disabled": day.disabled, "start": day.start }' ng-repeat="day in week track by $index" ng-click="select(day, $event)"> {{ day.date.date() }} </td> </tr> </table> </div>
24. ! <button ng-click="move(+1, $event)">&#9654;</button> </div> <div> <div> Select range: <select ng-click="preventSelect($event)" ng-model="quick" ng-options="e.range as e.label for e in quickList"> </select> </div> <div> <button ng-click="ok($event)">Apply</button> <a ng-click="hide($event)">cancel</a> </div> </div> </div> <span> <span ng-show=“model"> {{ model.start.format("ll") }} - {{ model.end.format("ll") }} </span> <span ng-hide="model">Select date range</span> </span>
25. $scope.selecting = false; $scope.visible = false; $scope.start = null; ! // ... ! scope.range.by(oneDayRange, function(date) { // ... scope.months[m].weeks[w][d] = { date: date, selected: ..., disabled: ..., start: ... }; }) ! // ... ! domEl = $compile(angular.element(pickerTemplate))(scope); element.append(domEl);
26. github.com/monterail/angular-date-range-picker Grab the code
27. Best practices Base as much as possible on data manipulation, not DOM ! Use proper data structures, not strings ! Defer intensive calculations until really needed ! Walk around watcher performance - github.com/Pasvaz/bindonce
28. Learn to write declarative directives ! Think of directives as reusable components, not wrappers ! Make the web better
29. Thank you! Follow more on angular on our blog: Codetunes.com Tymon Tobolski @iteamon Monterail.com Rangeapp.com