Things you want to know before developing a SaaS product — Part 1 : Start

8 min readApr 21, 2016

For the last few months, I had been designing and building the front-end infrastructure of a SaaS product.

With this post, I would like to share the main lessons I learned while creating this infrastructure from scratch , the good (and bad) decisions I made and most importantly, sharing some tips I would’ve liked to hear a few months ago, with the hope that it can give you ideas about how to start.

I’m not pretending to establish a universal way to create SaaS products, as I’m sure there are plenty of other ways and tools to resolve this challenge. I only want to show you the ones that work for me :)

SaaS products, as many other digital products, has the same life cycle with an S-curve of Start, Grow, Mature, Decline and Death. This cycle could take months or years, depending on the industry and the market. (see more about the S-curve in the book Illuminate).

I’ll be writing three separate posts using the main S-curve states (Start , Grow and Mature) to group the takeaways I get from this experience.

Part I : Start

Joining a project during their inception is a luxury we don’t always have. This may be the most critical moment of any product. All decisions, good or bad, will live with the product and with the users for the coming years. But before go into the technical details, let me explain you the context I had:

The Problem:

A legacy J2EE monolithic app needing to be transformed into a SaaS Cloud product ASAP.
Zero change to reuse UI components.
The only experience with a “modern” Web UI was a failed intent to use EXT Sencha UI with JAVA/JSP.
Little trust in JavaScript as the main language for B2B websites.
No separation in the build process for the UI or backend, basically the same artifact.

The Requirements:

Create a Single Web Page Architecture.
Support for Data Driven UI.
Support to CSS Themes.
Responsive design, mobile ready.
Easy integration with a RESTful API.
Use of Open Source Licenses Libraries (MIT).
The quick adoption for senior developers.
Easy to connect with a Continuity Integration process.
Based on Reusable components.
Testable.
Easy to work with remote teams.
Browser supports starting with IE8.
Dev environment on Window 7.

The Team:

A very strong group of Senior Java Developers, .Net Developers, QA and IT/DevOps.

After a couple weeks of testing diverse tools, this was the proposed Web Stack :

JavaScript Framework: Angular.js 1.X, reasons: The most popular Javascript MVC Framework, with a solid ecosystem of developers, documentation, and tools, with support for legacy browser (IE8+). Alternatives: ember.js, knockoutjs

2. Style Framework: Bootstrap, reasons: Using a style framework to start a responsive website just make a great foundation for your product, at least you have a design team of ninjas ready to build your product style from scratch.

3. CSS Preprocessor: SASS, reasons: Sass is a CSS preprocessing tool, supported by Bootstrap, and ready to make the old-school way to create CSS styles more object-oriented. Alternatives: Less, PostCSS.

4. UI Libraries: UI Bootstrap, reasons: You want to accelerate the time to build interactive HTML forms. To do that, you will need pre-built HTML widgets and libraries written in pure AngularJS

5. Router: UI Router, reasons: The router is the backbone of your SaaS Website . Unfortunately, the built-in router in angular.js is not great, but the community has created this de-facto state machine solution for flexible routing.

6. Font Icons Library: Font Awesome, reasons: With the increased use of HD or retina display UI, supporting image icons is complicated. The simple and elegant solution is use vector based icons.

7. Custom Font Icons: Fontello, reasons: Font Awesome is awesome but not invincible, sometimes the product owner or designers want to use a custom cryptic icon to represent a new functionality, but don’t panic, ask for a vector file and upload it to Fontello.

8. Scaffolds: Yeoman, reasons: When you start, you will need to respond all these questions:

What’s the best way to organize my files in a Single Web Page App?

Where have I to put my libraries?

How can I connect the build with the CI tools like Jenkins?

How to create Unit tests, E2E test infrastructure?

How to create a local server to watch files changes and refresh my app?

If you feel adventurous, you can try to do all this by yourself, but, it’s better standing on the shoulders of giants. Yeoman will respond to all these questions and more, with best practices and tools to help you stay productive.

9. Build System: Grunt, The new UI workflow will need very complicated tasks, like build, minified, deploy, local servers, pre-processing, etc. Grunt, that come with Yeoman, just make the job. alternative: gulp

10. Dependency Manager: Bower, The facto standard for JavaScript libraries. You will need a large list of external libraries in your app. Maintain these dependencies by hand it’s almost a mission impossible, better use Bower. alternative: npm

11. Unit Test: Jasmine + Karma, Also come with Yeoman. This creates the unit/integration test environment for your project. alternative: Mocha + Karma

12 . End 2 End Test: Protractor You will need an automation tool to make End2End tests. Protractor is a library in Javascript that works with selenium to automate your user interactions. No more Ruby or Cucumber required, yeah!.

13. IDE: Sublime Text2, Maybe one the big gains with the new UI stack is we don’t need to use eclipse anymore. You just need a text editor. A good one. Even NotePad is nice to start, but soon you will need more sophisticated tools. alternative: WebStorm

14. Source Control: git / gerrit , this is a must to have in any new project. Git is the more elegant way to manage and control your code, ideal for a remote team, with diverse time zones. alternative: github, gitlab

15. Code Analysis Tool: jshint, You will need to enforce good practices in your code, especially if you have outsourcing developers. Don’t take risks and lets JSHint check that every time you build your app. alternative: jsLint

16. Code Coverage Tool: Istanbul.js, When you try to implement a practice of Unit Test in your UI code base, remember this : 80% , That is the ideal code coverage your developers have to deploy with their code. The challenge is how to measure it. Well, Istanbul will show you a very nice report (HTML or text) and you can see the growth of your unit tests. We passed from 0% of code coverage to 75% with more than 1K unit tests…. nice.

17. Grid Widget: ui-grid , Grids are indispensable UI elements. Bootstrap and angular come with very basic grid implementations. It’s better you assumed from the beginning that will need a more professorial UI grid. ui-grid was my recommendation.

18. Javascript Engine: ES5, Here a great question, What JavaScript spec to use: ES5 or ES6? Here my advice: If you need to support legacy browsers like IE8+, you will need to use ES5, but if you can start with modern browsers, use ES6. Now, you can have the best from both worlds using a tool like Babel.js. Why?, because you will be coding in ES6, what is the new JavaScript standard, and babel.js will generate the compatible ES5 code for you. Unfortunately, I didn’t know that before and more that 15K lines of JavaScript will need to be ported to ES6 sooner or later... rrrrrrrr

19. Prototyping Tool: inVision, UX/UI is the new trending term in biz today. I can’t be more agreed with the importance and relevance of a shared understanding of the problem before we start coding. The risk is be creating very pixel detailed mockups without a real navigability. Here is where inVision is very good. It will make easy create clickable prototypes based on your mockups images.

20. Issue Tracker: Jira Community standard for issue management.

21. Debugging : Google Chrome DevTools. another community standard.

22. Headless browser: Phantom.js, When you run unit tests and e2e tests, you will need speed more that visual outputs. Phantom.js is exactly that. A headless browser that runs faster than a conventional one because it excludes the visual output.

With this 22 tools, you are in a winning position to start you SaaS website, but do not think all is ready. In the next posts, I’ll tell you how to move this infrastructure in the direction that you need.

Let me know what you think about this post. Would love to hear your thoughts. Like this post? Great! Follow me here on Medium or over on Twitter @solanojuan. It would be cool if you hit “Recommend” on this post too. Thanks!

More posts from J.P. Solano:

Things you want to know before developing a SaaS product — Part 1 : Start

Part I : Start

With this 22 tools, you are in a winning position to start you SaaS website, but do not think all is ready. In the next posts, I’ll tell you how to move this infrastructure in the direction that you need.

Written by J. P. Solano

Responses (1)