• Two problems in Angular.js

    I want to dive a bit deeper into the problems which rose from using Angular.js.

    1) Performance

    No matter how hard I tried to apply the best practices of the tutorial I found online on Angular I kept on having bad performance in the app. The things which you learn first and make Angular easy and cool turn out later to be the things to avoid.

    2) Complexity

    I found myself switching a lot between different files. I thought I did well by deciding to group controllers, models, directives and views. This resulted in functionality of a feature being scattered over different files.

    But the biggest thing was handling state. Handling state with 2 way data binding seems promising at first, but tends out to not only perform badly but also complicate some stuff.

  • Performance

  • Tackling complexity in frontends

  • As a first step I decided to put some thinking in how to make the app more performant. Being dissatisfied with the complexity and performance of Angular, the search for an alternative began.

    What way of approaching UI would benefit performance and simplicity? or How to deal with complexity in large scale client heavy web apps?

  • What is complexity?

  • Managing State

  • React.js

  • Om

  • Definitions

    Let’s start with defining what complexity is.

  • What makes a computer program simple?

    Looking at the definition of simple, what can we conclude about which elements of a computer program are simple or not. What is a one fold what is not.

    Talk by Rich Hickey on complexity

  • One of the biggest problems in programming user interfaces is complexity in handling and maintaining state. State is the data in your program that is constantly changing. Keeping the state consistent with what the user sees is the hardest part. The interface, what the user sees needs to be synchronized with this data. This is where the trouble comes in. How do you know when the data changed, what is changed and what should change in the interface? Angular for example tries to ease using state with two way data binding.

    State is the data which flows through your application. State needs to be maintained on changes. The more interactive your application is, the harder it is to maintain state. If you click a button here, something else happens there and maybe vice versa. How do you keep track of this?

    Most of the javascript frameworks try to have an answer to this problem. Which one is the best?

    http://www.youtube.com/watch?v=3ZLlRQJp5Fg

  • Paradigms

  • How does that look on the web?

  • But, aren’t globals a bad thing?

    Mutex and stuff…

  • In December 2013 Om was released. After reading this article by David Nolen on it’s ‘new’ simple paradigm and huge performance boost my mind was blown.

    Om is a Clojurescript library to be able to use React in Clojurescript.

    Om allows users to represent their UIs simply as EDN. Because ClojureScript data is immutable data, Om can always rapidly re-render the UI from the root.

    Thus Om UIs are out of the box snapshotable and undoable without much overhead or implementation complexity.

  • Complex

    noun
    1 a group or system of different things that are linked in a close or complicated way; a network: a complex of mountain roads.

    intertwined
    tangled
    braid

    This is objective.

    ORIGIN mid 17th cent. (in the sense ‘group of related elements’): from Latin complexus, past participle (used as a noun) of complectere ‘embrace, comprise’, later associated with complexus ‘plaited’; the adjective is partly via French complexe .

    ORIGIN early 17th cent. (in the sense ‘combine, entangle, intertwine’): from Latin complicat- ‘folded together’, from the verb complicare, from com- ‘together’ + plicare ‘to fold’.

  • Simple

    The antonym of complex is simple, which is derived from simplex.

    ORIGIN Middle English: from Old French, from Latin simplus. The noun sense (mid 16th cent.) originally referred to a medicine made from one constituent, especially from one plant.

    This is objective.

  • Easy

    Easy is different than simple and often mistaken for. Easy means “achieved without great effort; presenting few difficulties: an easy way of retrieving information.” This is subjective since it’s relative to a person’s own prior experience and opinionated.

  • Mutual exclusion

  • Immutable state

    The Runner: a child’s flip book serves to illustrate Clojure’s notions of state, time, and identity. The book itself represents the identity. Whenever you wish to show a change in the illustration, you draw another picture and add it to the end of your flip book. The act of flipping the pages therefore represents the states over time of the image within. Stopping at any given page and observing the particular picture represents the state of the Runner at that moment in time.

  • Mutable state

    The Mutable Runner: modeling state change with mutation requires that you stock up on erasers. Your book becomes a single page, requiring that in order to model changes, you must physically erase and redraw the parts of the picture requiring change. Using this model, you should see that mutation destroys all notion of time, and state and identity become one.

  • State and the DOM

    State also appears in web applications. As said before state is the data that drives your application. In web applications the interface the end user sees is most often the DOM. The DOM is the living collection of HTML components that make a web page.

    There are a couple of difficulties in keeping the DOM up to date with your state.

    1. Interaction with the DOM is expensive.
      Because the DOM is a tree of html elements. Selectors, deeply nested.

    2. It’s hard to observe the state whether it has changed or not.
      Javascript object are hard to compare with each other.

  • Techniques in maintaining the DOM and state.

    Let’s take a look at the different ways to approach these two problems.

  • Two way databinding

    Two way databinding is a technique used to update the dom or state whenever one of the two has been updated. It’s used heavily in Angular.js for example. Angular uses so-called ‘dirty checking’ to check if a state has been updated. Dirty checking means it will check the state object every couple of mili seconds whether it’s different than before.

  • Immutable DOM

    The immutable DOM present in React.js, a framework by Facebook takes a different approach in DOM manipulations.

{"cards":[{"_id":"48a35bd9609f236df300002a","treeId":"3549a29c66a9d0c635000015","seq":615617,"position":0.5,"parentId":null,"content":"# Two problems in Angular.js\nI want to dive a bit deeper into the problems which rose from using Angular.js.\n\n### 1) Performance\nNo matter how hard I tried to apply the best practices of the tutorial I found online on Angular I kept on having bad performance in the app. The things which you learn first and make Angular easy and cool turn out later to be the things to avoid. \n\n### 2) Complexity\nI found myself switching a lot between different files. I thought I did well by deciding to group controllers, models, directives and views. This resulted in functionality of a feature being scattered over different files. \n\nBut the biggest thing was handling state. Handling state with 2 way data binding seems promising at first, but tends out to not only perform badly but also complicate some stuff."},{"_id":"47dce1da3a61017072000042","treeId":"3549a29c66a9d0c635000015","seq":622145,"position":0.75,"parentId":null,"content":"## Performance"},{"_id":"47dcc42c3a6101707200003c","treeId":"3549a29c66a9d0c635000015","seq":622147,"position":0.5,"parentId":"47dce1da3a61017072000042","content":"As a first step I decided to put some thinking in how to make the app more performant. Being dissatisfied with the complexity and performance of Angular, the search for an alternative began.\n\nWhat way of approaching UI would benefit performance and simplicity? or How to deal with complexity in large scale client heavy web apps?"},{"_id":"47dce2433a61017072000043","treeId":"3549a29c66a9d0c635000015","seq":513973,"position":1,"parentId":"47dce1da3a61017072000042","content":"http://vuejs.org/perf/"},{"_id":"3549a2bd66a9d0c635000018","treeId":"3549a29c66a9d0c635000015","seq":531645,"position":1,"parentId":null,"content":"## Tackling complexity in frontends"},{"_id":"47dcc0e13a6101707200003b","treeId":"3549a29c66a9d0c635000015","seq":529371,"position":0.03125,"parentId":"3549a2bd66a9d0c635000018","content":"## What is complexity?"},{"_id":"47e96abbd106b20997000030","treeId":"3549a29c66a9d0c635000015","seq":531635,"position":1,"parentId":"47dcc0e13a6101707200003b","content":"### Definitions\nLet's start with defining what complexity is. \n"},{"_id":"48033f2a14b7030180000025","treeId":"3549a29c66a9d0c635000015","seq":539993,"position":1,"parentId":"47e96abbd106b20997000030","content":"#### Complex\nnoun\n1 a group or system of different things that are linked in a close or complicated way; a network: a complex of mountain roads.\n\nintertwined\ntangled\nbraid\n\nThis is objective.\n\nORIGIN mid 17th cent. (in the sense ‘group of related elements’): from Latin complexus, past participle (used as a noun) of complectere ‘embrace, comprise’, later associated with complexus ‘plaited’; the adjective is partly via French complexe .\n\nORIGIN early 17th cent. (in the sense ‘combine, entangle, intertwine’): from Latin complicat- ‘folded together’, from the verb complicare, from com- ‘together’ + plicare ‘to fold’."},{"_id":"47f93152d106b20997000039","treeId":"3549a29c66a9d0c635000015","seq":539995,"position":2,"parentId":"47e96abbd106b20997000030","content":"### Simple\nThe antonym of complex is simple, which is derived from simplex.\n\nORIGIN Middle English: from Old French, from Latin simplus. The noun sense (mid 16th cent.) originally referred to a medicine made from one constituent, especially from one plant.\n\nThis is objective."},{"_id":"4803406c14b7030180000026","treeId":"3549a29c66a9d0c635000015","seq":539996,"position":3,"parentId":"47e96abbd106b20997000030","content":"### Easy\nEasy is different than simple and often mistaken for. Easy means “achieved without great effort; presenting few difficulties: an easy way of retrieving information.” This is subjective since it’s relative to a person’s own prior experience and opinionated."},{"_id":"47e97471d106b20997000031","treeId":"3549a29c66a9d0c635000015","seq":539997,"position":2,"parentId":"47dcc0e13a6101707200003b","content":"\n### What makes a computer program simple?\nLooking at the definition of simple, what can we conclude about which elements of a computer program are simple or not. What is a one fold what is not.\n\nTalk by Rich Hickey on complexity"},{"_id":"47dc49623a61017072000033","treeId":"3549a29c66a9d0c635000015","seq":513830,"position":0.0625,"parentId":"3549a2bd66a9d0c635000018","content":"## Managing State"},{"_id":"47f93534d106b2099700003b","treeId":"3549a29c66a9d0c635000015","seq":615616,"position":0.09375,"parentId":"47dc49623a61017072000033","content":"One of the biggest problems in programming user interfaces is complexity in handling and maintaining state. State is the data in your program that is constantly changing. Keeping the state consistent with what the user sees is the hardest part. The interface, what the user sees needs to be synchronized with this data. This is where the trouble comes in. How do you know when the data changed, what is changed and what should change in the interface? Angular for example tries to ease using state with two way data binding. \n\nState is the data which flows through your application. State needs to be maintained on changes. The more interactive your application is, the harder it is to maintain state. If you click a button here, something else happens there and maybe vice versa. How do you keep track of this?\n\nMost of the javascript frameworks try to have an answer to this problem. Which one is the best?\n\nhttp://www.youtube.com/watch?v=3ZLlRQJp5Fg\n"},{"_id":"47ec7187d106b20997000036","treeId":"3549a29c66a9d0c635000015","seq":526312,"position":0.1875,"parentId":"47dc49623a61017072000033","content":"#### Paradigms"},{"_id":"47ec723ed106b20997000037","treeId":"3549a29c66a9d0c635000015","seq":526314,"position":1,"parentId":"47ec7187d106b20997000036","content":"### Imperative VS Declerative\n\nhttps://en.wikipedia.org/wiki/Imperative_programming"},{"_id":"47ec74c0d106b20997000038","treeId":"3549a29c66a9d0c635000015","seq":531675,"position":2,"parentId":"47ec7187d106b20997000036","content":"Mutual exclusion"},{"_id":"47dc4ac13a61017072000035","treeId":"3549a29c66a9d0c635000015","seq":540007,"position":3,"parentId":"47ec7187d106b20997000036","content":"### Immutable state\n\n> The Runner: a child’s flip book serves to illustrate Clojure’s notions of state, time, and identity. The book itself represents the identity. Whenever you wish to show a change in the illustration, you draw another picture and add it to the end of your flip book. The act of flipping the pages therefore represents the states over time of the image within. Stopping at any given page and observing the particular picture represents the state of the Runner at that moment in time."},{"_id":"47dc49b63a61017072000034","treeId":"3549a29c66a9d0c635000015","seq":540008,"position":4,"parentId":"47ec7187d106b20997000036","content":"### Mutable state\n\n> The Mutable Runner: modeling state change with mutation requires that you stock up on erasers. Your book becomes a single page, requiring that in order to model changes, you must physically erase and redraw the parts of the picture requiring change. Using this model, you should see that mutation destroys all notion of time, and state and identity become one."},{"_id":"48033d5114b7030180000023","treeId":"3549a29c66a9d0c635000015","seq":539991,"position":2,"parentId":"47dc49623a61017072000033","content":"### How does that look on the web?"},{"_id":"4803427f14b7030180000028","treeId":"3549a29c66a9d0c635000015","seq":540001,"position":1,"parentId":"48033d5114b7030180000023","content":"### State and the DOM\nState also appears in web applications. As said before state is the data that drives your application. In web applications the interface the end user sees is most often the DOM. The DOM is the living collection of HTML components that make a web page.\n\nThere are a couple of difficulties in keeping the DOM up to date with your state.\n\n1. Interaction with the DOM is expensive.\nBecause the DOM is a tree of html elements. Selectors, deeply nested.\n\n2. It’s hard to observe the state whether it has changed or not.\nJavascript object are hard to compare with each other."},{"_id":"4803436d14b7030180000029","treeId":"3549a29c66a9d0c635000015","seq":540002,"position":2,"parentId":"48033d5114b7030180000023","content":"### Techniques in maintaining the DOM and state.\nLet’s take a look at the different ways to approach these two problems."},{"_id":"480343fe14b703018000002a","treeId":"3549a29c66a9d0c635000015","seq":540003,"position":1,"parentId":"4803436d14b7030180000029","content":"#### Two way databinding\nTwo way databinding is a technique used to update the dom or state whenever one of the two has been updated. It’s used heavily in Angular.js for example. Angular uses so-called ‘dirty checking’ to check if a state has been updated. Dirty checking means it will check the state object every couple of mili seconds whether it’s different than before."},{"_id":"4803447c14b703018000002b","treeId":"3549a29c66a9d0c635000015","seq":540004,"position":2,"parentId":"4803436d14b7030180000029","content":"#### Immutable DOM\nThe immutable DOM present in React.js, a framework by Facebook takes a different approach in DOM manipulations. "},{"_id":"48033dd614b7030180000024","treeId":"3549a29c66a9d0c635000015","seq":539992,"position":3,"parentId":"47dc49623a61017072000033","content":"https://docs.google.com/a/meneatmen.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/edit#slide=id.g380053cce_1796\nhttp://n12v.com/2-way-data-binding/?hn"},{"_id":"48a37732609f236df300002b","treeId":"3549a29c66a9d0c635000015","seq":615635,"position":4,"parentId":"47dc49623a61017072000033","content":"### But, aren't globals a bad thing?\n\nMutex and stuff..."},{"_id":"47dc67a83a61017072000039","treeId":"3549a29c66a9d0c635000015","seq":513768,"position":0.125,"parentId":"3549a2bd66a9d0c635000018","content":"## React.js"},{"_id":"47dc5bdc3a61017072000037","treeId":"3549a29c66a9d0c635000015","seq":513880,"position":0.25,"parentId":"3549a2bd66a9d0c635000018","content":"## Om"},{"_id":"47dc5c6d3a61017072000038","treeId":"3549a29c66a9d0c635000015","seq":513829,"position":1,"parentId":"47dc5bdc3a61017072000037","content":"In December 2013 [Om]() was released. After reading [this article by David Nolen](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/) on it's 'new' simple paradigm and huge performance boost my mind was blown. \n\nOm is a Clojurescript library to be able to use React in Clojurescript. \n\n> Om allows users to represent their UIs simply as EDN. Because ClojureScript data is immutable data, Om can always rapidly re-render the UI from the root.\n\n> Thus Om UIs are out of the box snapshotable and undoable without much overhead or implementation complexity."}],"tree":{"_id":"3549a29c66a9d0c635000015","name":"Thesis","publicUrl":"thesis"}}