Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular replacements for jQuery-based libraries

Angular replacements for jQuery-based libraries

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


Tymon Tobolski

January 08, 2014

More Decks by Tymon Tobolski

Other Decks in Programming


  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

  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

  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

  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