The importance of being Small (AKA bundling and minification)

By AdamJuly 14, 2017 at 2:50 PM

When developing a web application, one must think about optimising the user experience.  And one of the things one must think about is the number and size of the files being downloaded.  

If you have ever gone to a web page where they have forgotten to optimise the graphics and you have a 2MB background picture; it can be painfully slow.  But one thing that many people forgot about is that most browsers can only download a small number of files at once, so the more files you have, the longer it will take the site to load.

Here at Cognitive X Solutions, we use the Angular framework for developing web sites that approach the speed and ease of use of a desktop application, and we do it with Microsoft's Typescript, which allows us to manage our JavaScript code bases with a greater level of ease, all the while helping us catch errors before they make it into production.  But combined, we end up with sometimes 100s of Javascript files.  Which is simply not acceptable for developing fast user experiences.

So what we do is we bundle and minify our javascript.  Simply put, we combine all of those 100 files into 1 or 2 larger files (that's bundling) and then we strip out all comments, extra lines and spaces, and apply optimisations to the JavaScript itself so that the resulting file(s) are much smaller.  (It has the (un)fortunate side effect of making the JavaScript extremely hard to read).

Originally we were doing this with a technology called Browserify, which analyses the interdependencies of our JavaScript files and produces a single file output that has all dependencies satisfied in an optimised way.  We would then combine this technology with another one called Gulp that would allow us to automate this process (it would watch for file changes and rerun Browserify when they did).  Gulp also handled compiling our CSS and inlining our HTML templates into a single file (Angular works by using templates, which without this inlining process meant that Angular, even if we combined it all into a single JavaScript file, would still be making calls to the server to load all those HTML snippets.  With inlining, we load one large file that contains all the snippets by name.  This allows a single call to be made to retrieve all templates, greatly increasing the speed / responsiveness of our web applications).

More recently, a new technology has come on the scene called Webpack.  Webpack is the official bundler of Angular 2 (we currently still use Angular 1.6+ as it has more llibraries available for it, Angular 2 was a complete rewrite of the technology and component libraries are still catching up), as well as the React framework (a competitor to Angular).  On one of our current projects, I decided to give Webpack a try.  And I was quite impressed.  It allowed me to accomplish in a much more succinct way (and in some cases more powerful way), what I had done with Gulp + Browserify.  The end result was that I combined all our JavaScript, HTML, and CSS into a single Javascript file.  So with one file download, a whole web application would spring to life.  That is powerful.  We will be switching our development practices to use this new technology so that our clients websites will experience this performance and responsiveness.

If you are interested in more information about exactly how we are using Webpack, you can check out my personal blog here

Posted in: Programming | Open Source

Tags:



DevJEDI Academy or #maritimedevcon 2016

By Sebastien AubeJune 6, 2016 at 9:27 AM

On the morning of June 4th, 2016 at 7:15 AM a contingent of seven padawans met at the Cognitive X Solutions offices to make the trip to Fredericton where fellow Padawans and DevJEDIs are hosting #martimtimedevcon. 

After a few years hiatus, the organisers brought it back in 2015 and in 2016 the conference has already gained some astonishing momentum.  Hundreds of developers and technologist congregated at the WU Centre to learn new tricks and news methods to wield the technology force and a few soft skill sessions brought in the mix. 

Among the many subjects, the overarching theme seemed to be building highly available, scalable and fault tolerant solutions. Topics such as Docker, the Actor Model, and Recursive Architecture helped us peer into the world of (micro, nano)services. As a dev padawan, I just want to dig deeper and see how we can apply these techniques to what we do at Cognitive X Solutions.

On the other hand, we were lucky to see presentations on soft skills such as product management, dealing with a complex project with tight deadlines and a presentation on making a presentation. What the presentation is for the audience and not for the presenter? There were some great tidbits in each of those presentations that I will indeed adopt or adapt in my daily activities.

Kudos to the organising team, sponsors and speakers for putting on such a great conference. I would give you the titles of dev Jedi, but you're probably too humble. We'll go with high padawan, seems to fit your persona better. This conference made many dev padawans happy.

Posted in: Learning | Programming

Tags:



Celebrating 5 years Part 3 - 6 Insights to keep you sane

By Sebastien AubeApril 26, 2016 at 8:06 AM

Starting a business can be exciting, a life changing event. What people don't talk about is that you're embarking on a ride. Some people have called it the roller coaster ride because of its ups and downs.  I would argue that entrepreneurship is a combination of rides that you can find at the amusement park. Like a roller coaster, merry-go-round, zipper and, the scrambler all rolled into one crazy ride.

Roller Coaster of Entrepreneurship

Five years in, I've gained a few insights that I'd like to share with you.

Prioritizing and Time Management

As an entrepreneur, there are so many things that compete for your attention in the run of a day. Learning how to set priorities and manage your time effectively are THE most important aspects to master.  You must include all aspects of life here including friends, family, and hobbies.

Surround yourself with like-minded people

Create a network of personal and professional friends that care about your success and growth. Give your precious energy to people that will give it ten folds and support you in your failures and successes. Maybe it's time to take a look at your relationships and do a Friendventory. Dan Martell, a great friend of mine, wrote an excellent blog post on friendships. http://www.danmartell.com/friendventory/

Read and educate yourself

Many have done what you are trying to do, why not learn from them, from their mistakes and successes. For me, it isn't about following a doctrine; it's about building an inventory of knowledge that becomes a source of influence for the way you run your business and your days.

Get a mentor/business advisor

Find someone that has succeeded and ask for advice or help. You'll be surprised how easily approachable people are when you ask for guidance. Learn from others that have already done it. Sometimes the best advisors are from a different industry than your own.

Invest in yourself

Spend time on numero uno. As a business owner, it's easy to lose sight of your personal needs. Find a hobby that takes you out of your daily schedule and do it often. Take vacations, go hiking, spend time meditating, ride your bike or go for long walks. Doing good for yourself will give you the energy you need to grow your business. 

Help others, volunteer

Don't underestimate the value of helping others. Volunteering, not only,  has the benefit of creating value in the lives of people in your community, but it also helps you feel great. There are numerous opportunities to enlist in your community.

Feel free to reach out. I'll be glad to spend time with you to help you find out what your list could look like.

Posted in: Events

Tags: