Slide 1
Slide 1 text
Angular replacements for
jQuery-based libraries
!
Meet.js Wrocław, 27.01.2014
Slide 2
Slide 2 text
Tymon Tobolski
@iteamon github.com/teamon
Slide 3
Slide 3 text
Angular changed
the way we think of
client side javascript
Slide 4
Slide 4 text
Dark ages
jQuery as polyfill for broken browsers
!
tons of various features
!
libraries “based on jQuery"
Slide 5
Slide 5 text
Browser support
jQuery 2.0 - no more IE <9
angular IE8+
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
How angular apps
look like today
* from Ruby programmer perspective
Slide 9
Slide 9 text
Services!
Controllers!
Filters!
Directives
Slide 10
Slide 10 text
Services!
Controllers!
Filters!
Directives
GOOD!
GOOD!
GOOD!
POOR
Slide 11
Slide 11 text
Directive
==
jQuery wrapper
Slide 12
Slide 12 text
Most jQuery wrappers
are very hackish
Slide 13
Slide 13 text
Angular beginners think
directives are magic
Slide 14
Slide 14 text
Directive
!= !
jQuery wrapper
Slide 15
Slide 15 text
Let’s talk about
Real World
Slide 16
Slide 16 text
Existing solutions
angular-ui.github.io/bootstrap!
kendo-labs.github.io/angular-kendo!
bazalt-cms.com/ng-table
github.com/danialfarid/angular-file-upload
Slide 19
Slide 19 text
date range picker
impossible and crazy to write by yourself
!
!
!
Slide 20
Slide 20 text
date range picker
impossible and crazy to write by yourself
!
based on moment and moment-range!
!
two way sync: UI ⁵ $scope
Slide 21
Slide 21 text
Interface
Slide 22
Slide 22 text
app.controller("TestCtrl", function($scope){
$scope.range = moment().range("2014-01-08", "2014-02-22")
}
Code
github.com/monterail/angular-date-range-picker
Slide 23
Slide 23 text
◀
{{ month.name }}
{{ day.date.date() }}
Slide 24
Slide 24 text
!
▶
{{ model.start.format("ll") }} - {{ model.end.format("ll") }}
Select date range
Select range:
Apply
cancel
Slide 25
Slide 25 text
$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);
Slide 26
Slide 26 text
github.com/monterail/angular-date-range-picker
Grab the code
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
Learn to write declarative directives
!
Think of directives as reusable
components, not wrappers
!
Make the web better
Slide 29
Slide 29 text
Thank you!
Follow more on Angular.js on our blog: Codetunes.com
Tymon Tobolski @iteamon
Monterail.com
Rangeapp.com
Slide 30
Slide 30 text
Monterail is hiring
http://join.hussa.rs
Ruby on Rails developer