From my experience with UI Engineering teams, developers tend to use different tools to deal with similar situations. Unfortunately, this is a common practice and does not include a standardized procedure. In my opinion, frameworks are a great choice to solve these type of problems, because it speeds up and streamlines the entire process. Of course, frameworks can sometimes give you headaches: bloating will make you lose time when solving new problems due to this standardization.
Why is Making Sense’s User Interface Framework (MSUIF) so special?
To begin with, we developed our Framework on top of NodeJS. And that’s awesome because, come on, NodeJS is awesome. Secondly, our main goal throughout was to create an environment where projects could grow, instead of focusing on just one tool to solve general problems. We used code concatenating and minifying tasks and also well known tasks such as: creation of icon fonts, image compression, and CSS pre-procession with Sass. Finally, MSUIF offers deployment to production and testing environments done from a terminal window, with just a single execution command.
Why NodeJS?
Usually Frameworks and tools end up on several occasions being used for something other than their primary objectives. For example, WordPress started as a blogging platform but through time ended up as a widely used CMS (content management system), having changed completely from its inception. In one of our previous posts written by Mariano Ravinale, our JavaScript expert, we learned how versatile NodeJs also is. This technology offers great speed, a single language for back and front-end, and is advantageous over other web servers as Apache. However, there’s a crucial aspect that deserves special attention, so let’s talk about that a little bit.
So what exactly is NodeJS’ real advantage? The main benefit that we focused on while developing MSUIF was NodeJS’ quick implementation and its flexible and adaptable condition for every situation. At Making Sense we work with a wide range of technologies throughout our projects. From our experience, we know it’s complicated when we mix different languages with diverse objectives. That’s why we needed a framework that worked for every project, regardless of what technology we might be working on at the moment. Developers can automate certain tasks, execute them in real time and be able to hold features in their webapps.
You may be familiar with task runners such as Grunt and Gulp. They allow the execution and automation of development and optimization tasks in real time, while a website or web app runs practically unnoticed. We decided to see the extent to which NodeJS and Grunt, as task-runner, could be utilized to speed up and automatizing the development process. Also, at the same time, we wanted to see how it could be used to standardize the code and practices quality required for every projects’ success. This particular aspect was vital for us, because our teams are located in different cities and technical inconsistencies can arise. When it was all said and done, we discovered that NodeJS can be used as a comprehensive part of a project, and also as an extra tool that contributes to the development and creation process of any project involving UI.
Apart from Grunt, we also chose Bower for handling the project’s technical dependencies. What does Bower do? It enables downloads of libraries and other dependencies that are previously specified for every project from the URLs in which the libraries are hosted. This way, it’s not necessary to download documents separately one by one, just to add tools like Jquery or Jeet, our team’s favourite grid system.
While building our framework, we took advantage of certain tasks and tools from Grunt to automate and normalize UI projects tasks, and we improved the code’s quality. Throughout this discovery the learning curve of our new team-members turned out to be more natural and less complex than we ever imagined!
This is a list of the different automated tasks we covered:
– grunt-contrib-connect
Creates a small server that supports the project during the development process.
– grunt-open
Opens the url of the server that Connect creates at the browser.
– grunt-contrib-watch
This task runs predefined tasks whenever watched file patterns are added, changed or deleted.
– grunt-bowercopy
Bower will download all the dependencies and relocate them in folders. The good thing is that all those folders can be personally be defined.
– grunt-processhtml
Process HTML is a simple but powerful template engine as well.
– grunt-webfont
Webfont automatically creates an icon font from a collection of SVG files in a specific folder.
– grunt-shell
It allows us to execute console commands directly from Grunt
– grunt-concurrent
As a default rule, Grunt executes only a single task at a time, yet we found out that we needed to run two tasks simultaneously to compile Sass and to Watch the files. Concurrent allow us to run and combine them easily and effortlessly.
– grunt-contrib-copy
When the time comes to deploy the completed project, Copy creates a copy of the project so we can run optimization tasks while keeping the original files untouched.
– grunt-contrib-clean
One of the optimizations we run is Clean, which finds and cleans files that are not needed in production servers.
– grunt-contrib-concat
It’s a good practice to reduce the amount of HTTP Requests to optimize the website’s response delay. Concat merges related files (Javascript, CSS) into single files, obtaining less files that can be quickly downloaded by the server whenever a page is visited.
– grunt-contrib-uglify
This task minifies and drastically reduces file sizes by trimming out spaces and comments in the files.
– grunt-contrib-cssmin
Similarly to Uglify, CSSmin does the same but with CSS files.
– grunt-svgmin
It reduces the file size of the SVG files that Webfont uses to create icon fonts and the ones that we directly use in our HTML files.
– grunt-contrib-kraken
This task runs inside Grunt, the popular -and amazing- Kraken Image Optimizer. In their own words, “Kraken is a robust, ultra-fast image optimizer and compressor with best-in-class algorithms”. This service reduces around 60% of image filesize in almost every project that we develop.
– grunt-ftpush
Last but not least, FTPush pushes the production ready folder that we have created and largely optimized to a specific testing or production environment.
Why Open Source? Our strategy
It was fundamental for us to make this an open-source project, allowing the community the possibility of using it and suggesting new ideas. We built a CSS-style architecture starter project that can be adjusted to any other, making it easily adaptable and flexible depending on the specific needs.
Download MSUIF
You can download the project from MSUIF GitHub public repository. There you’ll find the necessary documentation to integrate our framework to your project. We hope you find MSUIF useful. Share your experience, send us your comments to hello@makingsense.com !
The outcome
Currently, we have our Making Sense UI Framework running successfully both in clients’ projects and our own products as well. Results talk by themselves and the outcome has been remarkable with regards to the implementation and quality of all the projects:
- We drastically reduced the file size at the production servers
- The learning process is less painful for new project members
- We normalized the JavaScript and CSS files quality
- Deployment to production servers take less time
- We increased the UI response and responsiveness time
All in all, different tools may be used for every situation and development context. In a future post, we will talk about how to integrate MSUIF with our MEAN projects so stay tuned!