Angular 1.3

Slides live at
http://sfroestl.github.io/angular-13-talk/#/

Transcript

1. Angular 1.3 – Superluminal-nudge
   ||
   The best Angular yet!
   &&
   Sebastian Fröstl Kolja Lange
   

   View Slide

2. This talk is about {some} new features of Angular 1.3 and a quick
   look on Angular 2.
   Be sure to check out the references for further information
   (this slide has been added afterwards)
   

   View Slide

3. H
   u
   g
   e p
   e
   r
   f
   o
   r
   m
   a
   n
   c
   e
   i
   m
   p
   r
   o
   v
   e
   m
   e
   n
   t
   s
   !
   

   View Slide

4. Visit source
   

   View Slide

5. Benchmarking tool Benchpress
   github.com/angular/benchpress
   

   View Slide

6. O
   n
   e t
   i
   m
   e b
   i
   n
   d
   i
   n
   g
   s
   

   View Slide

7. Why?
   Data-binding is powerful, but Angular needs to watch each expression for changes
   Some bindings are just one-time reads
   More watchers slow down the digest loop (where angular resolves changes)
   Existing solutions: bindonce
   

   View Slide

8. Facts
   1. Evaluates the expression within the digest loop and stores the value
   2. If the value is defined, mark as stable and deregister watcher
   3. Continue the digest loop
   

   View Slide

9. <
   d
   i
   v n
   g
   -
   i
   n
   i
   t
   =
   "
   n
   a
   m
   e
   =
   '
   B
   e
   r
   l
   i
   n
   '
   "
   >
   <
   p
   >
   H
   e
   l
   l
   o {
   {
   :
   :
   n
   a
   m
   e
   }
   }
   <
   /
   p
   >
   <
   p
   >
   H
   e
   l
   l
   o {
   {
   n
   a
   m
   e
   }
   }
   <
   /
   p
   >
   <
   i
   n
   p
   u
   t n
   g
   -
   m
   o
   d
   e
   l
   =
   "
   n
   a
   m
   e
   "
   >
   <
   /
   d
   i
   v
   >
   

   View Slide

10. Used within any Angular expression
    <
    u
    l
    >
    <
    l
    i n
    g
    -
    r
    e
    p
    e
    a
    t
    =
    "
    f
    r
    i
    e
    n
    d i
    n :
    :
    f
    r
    i
    e
    n
    d
    s
    "
    >
    {
    {
    f
    r
    i
    e
    n
    d
    }
    }
    <
    /
    l
    i
    >
    <
    /
    u
    l
    >
    <
    p d
    a
    t
    a
    -
    t
    o
    o
    l
    t
    i
    p
    =
    "
    {
    {
    :
    :
    g
    e
    t
    T
    o
    o
    l
    t
    i
    p
    (
    )
    }
    }
    "
    >
    <
    /
    p
    >
    

    View Slide

11. n
    g
    M
    o
    d
    e
    l o
    p
    t
    i
    o
    n
    s
    

    View Slide

12. Facts
    Tune how your model updates
    Debounce update
    Specify custom events like focus, blur or default
    

    View Slide

13. debounce: {'default': 1000}
    <
    h
    3
    >
    S
    e
    a
    r
    c
    h
    : {
    {
    q
    u
    e
    r
    y
    }
    }
    <
    /
    h
    3
    >
    <
    i
    n
    p
    u
    t n
    g
    -
    m
    o
    d
    e
    l
    =
    "
    q
    u
    e
    r
    y
    " n
    g
    -
    m
    o
    d
    e
    l
    -
    o
    p
    t
    i
    o
    n
    s
    =
    "
    {
    d
    e
    b
    o
    u
    n
    c
    e
    : {
    '
    d
    e
    f
    a
    u
    l
    t
    '
    :
    1
    0
    0
    0
    }
    }
    "
    >
    

    View Slide

14. updateOn: 'blur'
    <
    h
    3
    >
    N
    a
    m
    e
    : {
    {
    n
    a
    m
    e
    }
    }
    <
    /
    h
    3
    >
    <
    i
    n
    p
    u
    t n
    g
    -
    m
    o
    d
    e
    l
    =
    "
    n
    a
    m
    e
    " n
    g
    -
    m
    o
    d
    e
    l
    -
    o
    p
    t
    i
    o
    n
    s
    =
    "
    {
    u
    p
    d
    a
    t
    e
    O
    n
    : '
    b
    l
    u
    r
    '
    }
    "
    >
    

    View Slide

15. n
    g
    M
    o
    d
    e
    l $
    v
    a
    l
    i
    d
    a
    t
    o
    r
    s
    

    View Slide

16. Facts
    Write custom, reusable validators
    Use $asyncValidators for server-side validation
    Great in combination with ngModel options
    Async validators wait for other validators
    

    View Slide

17. $asyncValidators
    .
    d
    i
    r
    e
    c
    t
    i
    v
    e
    (
    '
    a
    v
    a
    i
    l
    a
    b
    l
    e
    '
    , f
    u
    n
    c
    t
    i
    o
    n (
    $
    t
    i
    m
    e
    o
    u
    t
    ) {
    r
    e
    t
    u
    r
    n {
    r
    e
    q
    u
    i
    r
    e
    : '
    n
    g
    M
    o
    d
    e
    l
    '
    ,
    l
    i
    n
    k
    : f
    u
    n
    c
    t
    i
    o
    n (
    $
    s
    c
    o
    p
    e
    , e
    l
    e
    m
    e
    n
    t
    , a
    t
    t
    r
    s
    , n
    g
    M
    o
    d
    e
    l
    ) {
    n
    g
    M
    o
    d
    e
    l
    .
    $
    a
    s
    y
    n
    c
    V
    a
    l
    i
    d
    a
    t
    o
    r
    s
    .
    a
    v
    a
    i
    l
    a
    b
    l
    e =
    f
    u
    n
    c
    t
    i
    o
    n (
    u
    s
    e
    r
    n
    a
    m
    e
    ) {
    r
    e
    t
    u
    r
    n $
    t
    i
    m
    e
    o
    u
    t
    (
    f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    r
    e
    t
    u
    r
    n t
    r
    u
    e
    ;
    }
    , 1
    0
    0
    0
    , f
    a
    l
    s
    e
    )
    ;
    }
    ;
    }
    }
    ;
    }
    )
    ;
    

    View Slide

18. n
    g
    -
    m
    e
    s
    s
    a
    g
    e
    s
    

    View Slide

19. Why
    Easier form validation
    Avoid complex ng-if or ng-switch statements
    

    View Slide

20. Facts
    Show just one error message by default
    Separate module "angular-messages.js"
    Can be included from template with ngMessageInclude
    

    View Slide

21. ngMessages
    Username
    <
    s
    p
    a
    n n
    g
    -
    m
    e
    s
    s
    a
    g
    e
    s
    =
    "
    f
    o
    r
    m
    .
    u
    s
    e
    r
    n
    a
    m
    e
    I
    n
    p
    <
    p n
    g
    -
    m
    e
    s
    s
    a
    g
    e
    =
    "
    m
    i
    n
    l
    e
    n
    g
    t
    h
    "
    >
    …
    <
    /
    p
    >
    <
    p n
    g
    -
    m
    e
    s
    s
    a
    g
    e
    =
    "
    m
    a
    x
    l
    e
    n
    g
    t
    h
    "
    >
    …
    <
    /
    p
    >
    <
    p n
    g
    -
    

    View Slide

22. m
    e
    s
    s
    a
    g
    e
    =
    "
    p
    a
    t
    t
    e
    r
    n
    "
    >
    …
    <
    /
    p
    >
    <
    /
    s
    p
    a
    n
    >
    

    View Slide

23. n
    g
    -
    a
    n
    i
    m
    a
    t
    e
    

    View Slide

24. Tons of bugfixes
    No more need to set display property on ng-hide animations
    Better support for 3rd party animations
    New .animate() method
    Promises in JavaScript animations
    

    View Slide

25. $animate.animate()
    e
    l
    e
    m
    e
    n
    t
    .
    o
    n
    (
    '
    c
    l
    i
    c
    k
    '
    , f
    u
    n
    c
    t
    i
    o
    n (
    e
    ) {
    $
    a
    n
    i
    m
    a
    t
    e
    .
    a
    n
    i
    m
    a
    t
    e
    (
    a
    n
    g
    u
    l
    a
    r
    .
    e
    l
    e
    m
    e
    n
    t
    (
    i
    n
    d
    i
    c
    a
    t
    o
    r
    )
    , {
    }
    , {
    l
    e
    f
    t
    : e
    .
    o
    f
    f
    s
    e
    t
    X + '
    p
    x
    '
    ,
    t
    o
    p
    : e
    .
    o
    f
    f
    s
    e
    t
    Y + '
    p
    x
    '
    }
    , '
    i
    s
    -
    a
    n
    i
    m
    a
    t
    i
    n
    g
    '
    )
    ;
    $
    s
    c
    o
    p
    e
    .
    $
    d
    i
    g
    e
    s
    t
    (
    )
    ;
    }
    )
    ;
    

    View Slide

26. Performance tipp:
    $
    c
    o
    m
    p
    i
    l
    e
    P
    r
    o
    v
    i
    d
    e
    r
    .
    d
    e
    b
    u
    g
    I
    n
    f
    o
    E
    n
    a
    b
    l
    e
    d
    (
    f
    a
    l
    s
    e
    )
    ;
    Disables classes like "ng-binding, ng-scope" (used by protractor, batarang etc.)
    

    View Slide

27. What about migrating to 1.3?
    

    View Slide

28. We were afraid!
    Hybrid app, not a full SPA, other dependencies like jQuery
    Ancient jquery version 1.7
    Angular app 20000+ LOC
    132 directives, 90 controllers, 40 services
    No protractor tests
    Custom performance tunings, complexe directives
    

    View Slide

29. Problems:
    

    View Slide

30. None.
    

    View Slide

31. View Slide

32. What helped us:
    Not many breaking changes
    Dropped support for IE8 some months ago
    Update to jQuery 2.1 was the tricky part
    Used styleguides + software patterns
    No crazy (stupid) customizations
    Already on latest 1.2.x version
    

    View Slide

33. Q
    u
    i
    c
    k l
    o
    o
    k a
    t A
    n
    g
    u
    l
    a
    r 2
    

    View Slide

34. Angular 2
    Still in early state!
    Written in AtScript = ES6 + Dynamic types + Annotations
    Focus on mobile devices
    Keeps powerful features like Dependency Injection, testability
    New stuff like persistence layer, new router, components
    

    View Slide

35. Should I wait for Angular 2.0?
    

    View Slide

36. No.
    

    View Slide

37. … But
    Stay tuned for changes
    Write good Angular apps (use styleguides, patterns)
    There will be a migration guide!
    

    View Slide

38. Thanks!
    Sebastian Fröstl @sfroestl
    Kolja Lange @koljalange
    

    View Slide

39. References
    ng-europe youtube channel
    At Script Sepc
    ng-europe Angular 1.3 slides
    ng-forms
    ng aria guide
    Angular 2 blogpost
    Angular 2 status preview
    

    View Slide

40. FYI AngularJS Styleguides
    AngularJS Style Guide by John Papa
    AngularJS Style Guide by Todd Moto
    Writing a Massive Angular App @ ng-conf
    

    View Slide