{"id":3311,"date":"2019-02-11T17:57:40","date_gmt":"2019-02-11T17:57:40","guid":{"rendered":"http:\/\/13.52.125.237\/?p=3311"},"modified":"2019-02-11T17:57:51","modified_gmt":"2019-02-11T17:57:51","slug":"performance-characteristics-of-modern-javascript-systems","status":"publish","type":"post","link":"https:\/\/sotaenterprises.com\/?p=3311","title":{"rendered":"Performance Characteristics of Modern JavaScript Systems"},"content":{"rendered":"\n<p>Consider a modern system based on React, Redux, Meteor and MongoDB. Such a system conforms to an architectural ideal that I call&nbsp;<em>Absolute MVC<\/em>, in which the user interface is updated exclusively in response to state changes (i.e., UI actions or back-end changes). Meteor Live Query is state-of-the-art with respect to detecting back-end changes and pushing them to the UI via Websockets, particularly when MongoDB oplog tailing is enabled. This allows the UI to be 100% event-driven.<\/p>\n\n\n\n<p>In my own experience, modern system performance isn\u2019t usually constrained by the server; in fact, this is one of the advantages of a JavaScript-based SaaS application: a remarkable amount of processing can be offloaded to the client. Consider that with a traditional web application based on LAMP, all HTML rendering is done on the server and that HTML result is sent to the client on a silver platter. Moving those rendering functions to the client dramatically reduces the load on the server, and that can consequently reduce hosting costs.<\/p>\n\n\n\n<p>What are the performance considerations of a modern JavaScript system?&nbsp;It all boils down to one word:&nbsp;<em>rendering<\/em>. State changes trigger event listeners that must judiciously re-render parts of the UI.<\/p>\n\n\n\n<p>In React\/Redux\/Meteor, a recurring concern is whether a given component should be sensitive or insensitive to state changes. By default, React components will re-render unconditionally in response to state changes, so one of the low-hanging optimizations is to hand-craft rules that can analyze state changes and prevent re-rendering unless absolutely necessary. These rules are expressed in React lifecycle method&nbsp;<strong>shouldComponentUpdate<\/strong>.<\/p>\n\n\n\n<p>In short, performance optimization of modern JavaScript system is largely a matter of minimizing rendering and re-rendering.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Consider a modern system based on React, Redux, Meteor and MongoDB. Such a system conforms to an architectural ideal that I call&nbsp;Absolute MVC, in which the user interface is updated exclusively in response to state changes (i.e., UI actions or back-end changes). Meteor Live Query is state-of-the-art with respect to detecting back-end changes and pushing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts\/3311"}],"collection":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3311"}],"version-history":[{"count":1,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts\/3311\/revisions"}],"predecessor-version":[{"id":3312,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=\/wp\/v2\/posts\/3311\/revisions\/3312"}],"wp:attachment":[{"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sotaenterprises.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}