Shaking the Bamboo Tree: How Bamboo uses code-elimination techniques to make code more efficient

The concept of tree shaking has become increasingly important in the world of deploying web-based applications that use JavaScript. With the recent release of Bamboo’s Cloud Parts®, which are a suite of SharePoint web parts intended for use on both SharePoint online and on-premises, Bamboo uses this technique to decrease the size of their release bundles as well as to accelerate the rendering of the Cloud Parts®.

Tree Shaking and AOT

Tree Shaking is defined as dead code elimination technique, where a static code analysis of the module syntax is performed to decide which parts of the Angular or other library modules need to be included in the final bundle. ECMAScript 2015 modules support import and export statements which allows for static code analysis and finding unused code. Angular CLI uses webpack2 along with UglifyJS to accomplish tree shaking. During the build process, webpack2 will mark the unused code and UglifyJS will remove it if it can determine it’s safe to remove and would not cause any side effects.

Traditional JavaScript uses Just in Time (JIT) compilation and runs in the browser. This turns out to be good if the application files are small as they can be downloaded and executed fast. But in case of angular, the JIT build is huge as it includes the angular compiler, along with other libraries. To handle this, Angular introduced Ahead-Of-Time (AOT) compilation. As the name suggests, Angular CLI will compile HTML templates into TypeScript code and then perform tree shaking, minification and other optimization techniques to produce smaller and efficiently executable JavaScript code. AOT will significantly speed up the application, especially the startup time because the templates are compiled ahead of time which eliminates the need to include the angular compiler in the bundle. If you want to read more about the angular compiler you can refer the angular AOT documentation.

While compiling and deploying Cloud Parts®, Bamboo enables tree shaking and minification by enabling the Ahead of Time compilation (–aot).

JIT: npm run build

AOT: npm run build –aot

Angular CLI supports JIT when targeted to development environments to make it easier for developers. However, this version is not minified/uglified and does not include tree shaking. The AOT is built in when targeted for the production environment and applies stricter rules which might lead to more compilation errors than the non-AOT build. This is actually advantageous, since more errors are detected during the compilation process and can be fixed rather than errors showing up during runtime.

For third-party libraries, Angular to performs tree shaking if the libraries also support tree shaking. This means that the libraries must be written in ECMAScript 2015 or greater and with some metadata for the AOT builds. Most of our products use Kendo UI for Angular, which does support tree shaking and AOT.

To demonstrate the effectiveness of the AOT build, production (AOT) and development (non-AOT) builds were run for three Bamboo Cloud Part® products: List Rollup, Calendar Plus and Chart Plus, and the total size of the bundle files were compared. The results are shown in the chart below. For all three products, there was approximately 70% decrease in the size of the bundles. When using the AOT build, the unused library modules were removed during the tree shaking process and minification/uglification lead to more compacted executable code, resulting in this significant reduction in size.

(NOTE: @angular/cli >= 1.6.3, node: 8.9.4, Angular 5.2.6, webpack: 3.11.0, typescript: 2.6.2 are the different versions of the components when the results were tabulated.)

Tree shaking techniques prove to be a big pay-off when offerent JavaScript-based solutions online. Using Angular AOT, tree shaking and minification, Bamboo was able to decrease the size of the release builds of Cloud Parts®, considerably speeding up the process of loading the bundles and application rendering time.

SharePoint

Applications

SharePoint apps are stand-alone applications that perform specific tasks on a SharePoint site. Apps can perform functions such as managing a discussion board or knowledge base, performing project management or time tracking tasks, or doing other workflow operations.

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Essentials


Essentials Plus


Bamboo Premier


Project Management Suite


Knowledge Management Suite


External User Manager



SharePoint

Web Parts

Extend SharePoint beyond its out-of-the-box capabilities by tailoring it to your requirements with Bamboo Solution’s growing portfolio of Web Parts. Web Parts are the building blocks of pages on a SharePoint site that can be used to customize the user interface and content of a site page. 

SharePoint

Product Suites

Experience greater power and savings by bundling our SharePoint apps and web parts.


Essentials


Essentials Plus


Bamboo Premier


Project Management Suite


Knowledge Management Suite


External User Manager



Office 365

Cloud Parts

Cloud Parts are functional components that extend your SharePoint environment whether it’s hosted, on-premises, or part of Microsoft Office 365. More than mere ports of existing software to the cloud, our Cloud Parts have been built from the ground up to take advantage of the best that the cloud has to offer.

Office 365

Cloud Parts Subscriptions

Experience our Office 365 Cloud Parts with easy monthly or yearly unlimited user subscriptions for a site collection or your full domain.


Bamboo Business


Project Management Cloud



Featured Services

SharePoint Health Check

A SharePoint Health Check will identify the causes of issues and risks associated with your specific environment, and is custom tailored to provide you with the best recommendations to optimize your SharePoint environment.

SQL Health Check

Document recommendations relating to performance, stability, availability, or a specific focus you request of your SQL Server database instances.

My SharePointXperts

The truth is that each SharePoint skill may not be a full time job for many organizations, and it is nearly impossible for one person to do everything you need – so augment your team with SharePointXperts; providing the skill sets you need when you need them!