Cutting Angular's Crosscuts

No matter how DRY our code gets, there are times when the object-oriented paradigm is just not powerful enough to handle all code duplications. Applying logging and authorisation, for example, makes us copy and paste snippets all around our code-base without being able to isolate them in separate modules. This makes our code more coupled; less reusable and maintainable.

The aspect-oriented programming comes with a solution for such “cross-cutting concerns”. It is already widely used in the Java world, in AspectJ and Spring. In my talk I will bring the aspect-oriented programming paradigm to Angular. I’ll explain how to deal with duplications and make our code more maintainable using AOP with the new ECMAScript 2016 decorators’ syntax.

Transcript

1. Cutting Angular’s Crosscuts
   Minko Gechev
   github.com/mgechev
   twitter.com/mgechev
   blog.mgechev.com
   https://www.flickr.com/photos/davefrost/15704668417/
   

   View Slide

2. github.com/mgechev
   twitter.com/mgechev
   blog.mgechev.com
   

   View Slide

3. Lets talk about
   object-oriented programming
   

   View Slide

4. Agenda
   • Title 1
   • Subtitle 1
   • Subtitle 2
   • Title 2
   • Subtitle 1
   https://www.flickr.com/photos/cinamonas/3191659268/
   Why it was invented?
   

   View Slide

5. Simple project
   

   View Slide

6. Agenda
   • Title 1
   • Subtitle 1
   • Subtitle 2
   • Title 2
   • Subtitle 1
   

   View Slide

7. Large project
   

   View Slide

8. View Slide

9. https://www.flickr.com/photos/jackson22/16706843701
   Simple tools were not enough
   

   View Slide

10. Agenda
    • Title 1
    • Subtitle 1
    • Subtitle 2
    • Title 2
    • Subtitle 1
    https://www.flickr.com/photos/fastlizard4/5391914387/
    …something more powerful was required
    

    View Slide

11. https://www.flickr.com/photos/bcbusinesshub/17020592469/
    A new idea
    

    View Slide

12. Brings 4 powerful principles
    

    View Slide

13. Abstraction
    

    View Slide

14. Inheritance
    Abstraction
    

    View Slide

15. Inheritance
    Encapsulation
    Abstraction
    

    View Slide

16. Inheritance
    Encapsulation
    Abstraction
    Polymorphism
    

    View Slide

17. Inheritance
    Encapsulation
    Abstraction
    Polymorphism
    

    View Slide

18. Abstraction helps us handle
    complexity
    

    View Slide

19. User
    

    View Slide

20. user.ts
    export class User {
    public id: number;
    public name: string;
    public email: string;
    public website: string;
    }
    

    View Slide

21. User
    

    View Slide

22. user.ts
    export class User {
    // ...
    save() {
    return new Promise((resolve, reject) => {
    var params = this._serialize();
    http.open('POST', URL, true);
    http.setRequestHeader(‘Content-type',
    'application/x-www-form-urlencoded');
    http.onreadystatechange = _ => {
    if (http.readyState === 4) {
    if (http.status === 200) {
    resolve();
    } else {
    reject();
    }
    }
    }
    http.send(params);
    });
    }
    }
    

    View Slide

23. user.ts
    export class User {
    // ...
    save() {
    return new Promise((resolve, reject) => {
    var params = this._serialize();
    http.open('POST', URL, true);
    http.setRequestHeader(‘Content-type',
    'application/x-www-form-urlencoded');
    http.onreadystatechange = _ => {
    if (http.readyState === 4) {
    if (http.status === 200) {
    resolve();
    } else {
    reject();
    }
    }
    }
    http.send(params);
    });
    }
    }
    

    View Slide

24. SOLID
    

    View Slide

25. SOLID
    

    View Slide

26. High-level modules should not
    depend on low-level modules…
    

    View Slide

27. Abstractions should not depend on
    details…
    

    View Slide

28. User
    

    View Slide

29. User
    Http
    

    View Slide

30. http.ts
    export class Http {
    get(url) {
    return fetch(url)
    .then(res => {
    return res.json();
    });
    }
    post(url, data) {
    return fetch(url, {
    method: 'post',
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
    })
    .then(res => {
    return res.json();
    });
    }
    }
    

    View Slide

31. http.ts
    export class Http {
    get(url) {
    return fetch(url)
    .then(res => {
    return res.json();
    });
    }
    post(url, data) {
    return fetch(url, {
    method: 'post',
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
    })
    .then(res => {
    return res.json();
    });
    }
    }
    

    View Slide

32. http.ts
    export class Http {
    get(url) {
    return fetch(url)
    .then(res => {
    return res.json();
    });
    }
    post(url, data) {
    return fetch(url, {
    method: 'post',
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
    })
    .then(res => {
    return res.json();
    });
    }
    }
    

    View Slide

33. UserFinder
    Http
    User
    

    View Slide

34. user_finder.ts
    export class UserFinder {
    constructor(
    @Inject(Http) private http:Http,
    @Inject(API_SERVER) private url:string) {
    }
    get(id: number): Promise {
    return this.http.get(this.url + '/' + id)
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    return user;
    });
    }
    }
    

    View Slide

35. export class UserFinder {
    constructor(
    @Inject(Http) private http:Http,
    @Inject(API_SERVER) private url:string) {
    }
    get(id: number): Promise {
    return this.http.get(this.url + '/' + id)
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

36. export class UserFinder {
    constructor(
    @Inject(Http) private http:Http,
    @Inject(API_SERVER) private url:string) {
    }
    get(id: number): Promise {
    return this.http.get(this.url + '/' + id)
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

37. Layers of Abstraction
    

    View Slide

38. UserFinder
    Http
    User
    

    View Slide

39. UserFinder
    Http
    User
    

    View Slide

40. UserFinder
    Http
    User
    

    View Slide

41. UserFinder
    Http
    User
    

    View Slide

42. UserFinder
    Http
    User
    Cache users in
    localStorage
    

    View Slide

43. export class UserFinder {
    // ...
    get(id: number): Promise {
    let user = JSON.parse(
    localStorage.getItem(id.toString()) || 'null'
    );
    let promise;
    if (user) {
    promise = Promise.resolve(user);
    } else {
    promise = this.http.get(this.url + '/' + id);
    }
    return promise
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    localStorage.setItem(id.toString(),
    JSON.stringify(user));
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

44. export class UserFinder {
    // ...
    get(id: number): Promise {
    let user = JSON.parse(
    localStorage.getItem(id.toString()) || 'null'
    );
    let promise;
    if (user) {
    promise = Promise.resolve(user);
    } else {
    promise = this.http.get(this.url + '/' + id);
    }
    return promise
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    localStorage.setItem(id.toString(),
    JSON.stringify(user));
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

45. UserFinder
    Http
    User
    Cache requests
    in memory
    

    View Slide

46. http.ts
    export class Http {
    // ...
    get(url:string) {
    if (cache.has(url)) {
    return Promise.resolve(cache.get(url));
    } else {
    return fetch(url)
    .then(res => {
    return res.json();
    })
    .then(data => {
    cache.set(url, data);
    return data;
    });
    }
    }
    }
    

    View Slide

47. http.ts
    export class Http {
    // ...
    get(url:string) {
    if (cache.has(url)) {
    return Promise.resolve(cache.get(url));
    } else {
    return fetch(url)
    .then(res => {
    return res.json();
    })
    .then(data => {
    cache.set(url, data);
    return data;
    });
    }
    }
    }
    

    View Slide

48. Caching crosscut levels
    of abstraction
    

    View Slide

49. Cross-cutting concerns
    

    View Slide

50. What part of the method is not related
    to the class purpose?
    

    View Slide

51. export class UserFinder {
    // ...
    get(id: number): Promise {
    let user = JSON.parse(
    localStorage.getItem(id.toString()) || 'null'
    );
    let promise;
    if (user) {
    promise = Promise.resolve(user);
    } else {
    promise = this.http.get(this.url + '/' + id);
    }
    return promise
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    localStorage.setItem(id.toString(),
    JSON.stringify(user));
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

52. export class UserFinder {
    // ...
    get(id: number): Promise {
    let user = JSON.parse(
    localStorage.getItem(id.toString()) || 'null'
    );
    let promise;
    if (user) {
    promise = Promise.resolve(user);
    } else {
    promise = this.http.get(this.url + '/' + id);
    }
    return promise
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    localStorage.setItem(id.toString(),
    JSON.stringify(user));
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

53. http.ts
    export class Http {
    // ...
    get(url:string) {
    let promise;
    if (cache.has(url)) {
    promise = Promise.resolve(cache.get(url));
    } else {
    promise = fetch(url)
    .then(res => {
    return res.json();
    })
    .then(data => {
    cache.set(url, data);
    return data;
    });
    }
    return promise
    .then(data => {
    return data;
    });
    }
    }
    

    View Slide

54. http.ts
    export class Http {
    // ...
    get(url:string) {
    let promise;
    if (cache.has(url)) {
    promise = Promise.resolve(cache.get(url));
    } else {
    promise = fetch(url)
    .then(res => {
    return res.json();
    })
    .then(data => {
    cache.set(url, data);
    return data;
    });
    }
    return promise
    .then(data => {
    return data;
    });
    }
    }
    

    View Slide

55. Cannot be cleanly decomposed and
    can result in either scattering or tangling
    

    View Slide

56. Object-oriented programming is
    not powerful enough
    

    View Slide

57. View Slide

58. Aspect-oriented programming
    

    View Slide

59. What if we could…
    

    View Slide

60. Move the crosscuts into
    separate modules
    

    View Slide

61. export class UserFinder {
    // ...
    get(id: number): Promise {
    let user = JSON.parse(
    localStorage.getItem(id.toString()) || 'null'
    );
    let promise;
    if (user) {
    promise = Promise.resolve(user);
    } else {
    promise = this.http.get(this.url + '/' + id);
    }
    return promise
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    localStorage.setItem(id.toString(),
    JSON.stringify(user));
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

62. export class UserFinder {
    // ...
    get(id: number): Promise {
    let user = JSON.parse(
    localStorage.getItem(id.toString()) || 'null'
    );
    let promise;
    if (user) {
    promise = Promise.resolve(user);
    } else {
    promise = this.http.get(this.url + '/' + id);
    }
    return promise
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    localStorage.setItem(id.toString(),
    JSON.stringify(user));
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

63. export class UserFinder {
    // ...
    get(id: number): Promise {
    return this.http.get(this.url + '/' + id)
    .then(res => {
    let user = new User();
    user.id = res.id;
    user.name = res.name;
    user.email = res.email;
    user.website = res.website;
    return user;
    });
    }
    }
    user_finder.ts
    

    View Slide

64. http.ts
    export class Http {
    // ...
    get(url:string) {
    let promise;
    if (cache.has(url)) {
    promise = Promise.resolve(cache.get(url));
    } else {
    promise = fetch(url)
    .then(res => {
    return res.json();
    })
    .then(data => {
    cache.set(url, data);
    return data;
    });
    }
    return promise
    .then(data => {
    return data;
    });
    }
    }
    

    View Slide

65. http.ts
    export class Http {
    // ...
    get(url:string) {
    let promise;
    if (cache.has(url)) {
    promise = Promise.resolve(cache.get(url));
    } else {
    promise = fetch(url)
    .then(res => {
    return res.json();
    })
    .then(data => {
    cache.set(url, data);
    return data;
    });
    }
    return promise
    .then(data => {
    return data;
    });
    }
    }
    

    View Slide

66. http.ts
    export class Http {
    // ...
    get(url:string) {
    return fetch(url)
    .then(res => {
    return res.json();
    });
    }
    }
    

    View Slide

67. …move the entire caching logic into
    separate module
    

    View Slide

68. cache_aspect.ts
    export class CacheAspect {
    @before(/^UserMapper$/, /^get/)
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @after(/^UserMapper$/, /^get/)
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

69. cache_aspect.ts
    export class CacheAspect {
    @before(/^UserMapper$/, /^get/)
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @after(/^UserMapper$/, /^get/)
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

70. cache_aspect.ts
    export class CacheAspect {
    @before(/^UserMapper$/, /^get/)
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @after(/^UserMapper$/, /^get/)
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

71. How to connect everything together?
    

    View Slide

72. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

73. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

74. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

75. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

76. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

77. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

78. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

79. cache_aspect.ts
    export class CacheAspect {
    @beforeMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    beforeUserFinderGetInvocation(meta, id) {
    this.queryCache(lsCache, meta.method, id);
    }
    @afterMethod({
    classNamePattern: /^UserFinder$/,
    methodNamePattern: /^get/
    })
    afterUserFinderGetInvocation(meta, id) {
    this.setCache(lsCache, meta.method, id);
    }
    // same for Http
    queryCache(cache, method, id) { }
    setCache(cache, method, id) { }
    }
    

    View Slide

80. cache_aspect.ts
    export class CacheAspect {
    // ...
    queryCache(cache, method, id) {
    let res = cache.get(id);
    if (res) {
    method.proceed = false;
    return Promise.resolve(res);
    }
    }
    setCache(cache, method, id) {
    return method.result.then(data => {
    cache.set(id, data);
    return data;
    });
    }
    }
    

    View Slide

81. cache_aspect.ts
    export class CacheAspect {
    // ...
    queryCache(cache, method, id) {
    let res = cache.get(id);
    if (res) {
    method.proceed = false;
    return Promise.resolve(res);
    }
    }
    setCache(cache, method, id) {
    return method.result.then(data => {
    cache.set(id, data);
    return data;
    });
    }
    }
    

    View Slide

82. cache_aspect.ts
    export class CacheAspect {
    // ...
    queryCache(cache, method, id) {
    let res = cache.get(id);
    if (res) {
    method.proceed = false;
    return Promise.resolve(res);
    }
    }
    setCache(cache, method, id) {
    return method.result.then(data => {
    cache.set(id, data);
    return data;
    });
    }
    }
    

    View Slide

83. cache_aspect.ts
    export class CacheAspect {
    // ...
    queryCache(cache, method, id) {
    let res = cache.get(id);
    if (res) {
    method.proceed = false;
    return Promise.resolve(res);
    }
    }
    setCache(cache, method, id) {
    return method.result.then(data => {
    cache.set(id, data);
    return data;
    });
    }
    }
    

    View Slide

84. View Slide

85. aspect.js
    

    View Slide

86. Lets reveal the magic…
    

    View Slide

87. export class CacheAspect {
    @before(/.*/, /^get/)
    before(m, param) { }
    @after(/.*/, /^get/)
    after(m, id) { }
    }
    @Wove()
    export class Http {
    get(url:string) {
    // ...
    }
    }
    http.ts cache_aspect.pseudo
    

    View Slide

88. http.ts
    export class Http {
    get(url) {
    CacheAspect.before(metadata);
    Http.originalGet(url);
    CacheAspect.after(metadata);
    }
    }
    http.pseudo
    @Wove()
    export class Http {
    get(url:string) {
    // ...
    }
    }
    export class CacheAspect {
    @before(/.*/, /^get/)
    before(m, param) { }
    @after(/.*/, /^get/)
    after(m, id) { }
    }
    cache_aspect.pseudo
    

    View Slide

89. http.ts
    export class Http {
    get(url) {
    CacheAspect.before(metadata);
    Http.originalGet(url);
    CacheAspect.after(metadata);
    }
    }
    http.pseudo
    @Wove()
    export class Http {
    get(url:string) {
    // ...
    }
    }
    export class CacheAspect {
    @before(/.*/, /^get/)
    before(m, param) { }
    @after(/.*/, /^get/)
    after(m, id) { }
    }
    cache_aspect.pseudo
    

    View Slide

90. http.ts
    export class Http {
    get(url) {
    CacheAspect.before(metadata);
    Http.originalGet(url);
    CacheAspect.after(metadata);
    }
    }
    http.pseudo
    @Wove()
    export class Http {
    get(url:string) {
    // ...
    }
    }
    export class CacheAspect {
    @before(/.*/, /^get/)
    before(m, param) { }
    @after(/.*/, /^get/)
    after(m, id) { }
    }
    cache_aspect.pseudo
    

    View Slide

91. http.ts
    export class Http {
    get(url) {
    CacheAspect.before(metadata);
    Http.originalGet(url);
    CacheAspect.after(metadata);
    }
    }
    http.pseudo
    @Wove()
    export class Http {
    get(url:string) {
    // ...
    }
    }
    export class CacheAspect {
    @before(/.*/, /^get/)
    before(m, param) { }
    @after(/.*/, /^get/)
    after(m, id) { }
    }
    cache_aspect.pseudo
    

    View Slide

92. http.ts
    export class Http {
    get(url) {
    CacheAspect.before(metadata);
    Http.originalGet(url);
    CacheAspect.after(metadata);
    }
    }
    http.pseudo
    @Wove()
    export class Http {
    get(url:string) {
    // ...
    }
    }
    export class CacheAspect {
    @before(/.*/, /^get/)
    before(m, param) { }
    @after(/.*/, /^get/)
    after(m, id) { }
    }
    cache_aspect.pseudo
    

    View Slide

93. Proxy-based AOP
    

    View Slide

94. What about AngularJS 1.x?
    

    View Slide

95. View Slide

96. View Slide

97. – Ryan Singer
    “So much complexity in software comes from trying to
    make one thing do two things.”
    

    View Slide

98. Switching to Angular 2
    

    View Slide

99. Thank you!
    github.com/mgechev
    twitter.com/mgechev
    blog.mgechev.com
    

    View Slide