Tech Stack

Startaê is a company opened to learn, test and create new applications using brand new technologies. After experimenting several programming languages, frameworks and tools, we got to a simple stack we use in our projects.

Frontend

The tools we use for Frontend development vary according to the project’s nature, but our suite of technologies includes:

• Javascript (pure)
• JQuery
• D3.js
• EmberJS
• Ruby on Rails
• Middleman

Ruby on Rails

Ruby on Rails, is an open source web application framework written in Ruby. It's a model-view-controller (MVC) framework that provides default structures following well-known patterns including don't repeat yourself (DRY), active record pattern and convention over configuration (CoC). It turns easy the usage of web standards such as JSON or XML for data transfer, and the manipulation of HTML, CSS and JavaScript for display and user interfacing.

Middleman

Middleman is a gem that brings an organized structure for the project and it’s easy to configure, customize and deploy. It improves our productivity. Its structure is somewhat reminiscent of Rails, because it works with layouts and specific folders for project assets. Our website was created using Middleman and the following other projects: VPS website, Startaê’s blog, Superquadra’s blog, HUB project website.

Javascript

Ember.js

Focus on ambitious web applications: Ember sets out to provide a wholesale solution to the client-side application problem. This is in contrast to many Javascript frameworks that start by providing a solution to the V in the MVC, and attempt to grow from there.

Future web standards foresight: Ember has been an early adopter and pioneer of many standards around javascript and the web including promises, web components and ES6 syntax.

Small choices are made for you: Ember follows Convention over Configuration, and the Don't Repeat Yourself principle. It is a highly opinionated framework that provides good defaults and cultivates shared abstractions so developers are free to focus on bigger and better ideas.

http://blog.codeschool.io/2015/10/26/7-reasons-to-use-ember-js/

JQuery

JQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

D3.js

When it comes to Data Visualization, D3 is the main resource we have as it enables the creation of dynamic and interactive graphics/charts for modern browsers. Here are some examples of what we have done using this library.

D3 also has a big active community of users, which gives us access to many examples of charts as well as the library constantly evolving.

Preprocessors

HTML, CSS and Javascript are very powerful technologies and they are the bases to build everything in Startaê, but to write them as they are, is sometimes counterintuitive and awkward. To handle this, the preprocessors come to make life easier for developers.

They act as an abbreviated version of markups commonly used by us. Also, they bring consistency, standardized structure, clean code and save the time we would spend standardizing the code.

We use three preprocessors:

1. Sass, that is compiled to CSS
2. Ruby Slim, that is compiled to HTML
3. Coffeescript, which is compiled to Javascript

Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It's well-known as CSS with superpowers.

We can use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. Sass has been actively supported for about 9 years by its Core Team.

Slim

Slim is a template language that we can reduce the syntax to the essential parts without becoming cryptic. Using Slim, the bureaucratic part of the HTML is removed from the standard template (<, >, closing tags, etc…). It reduces time and complexity.

Coffescript

Coffeescript is an attempt to expose the good parts of JavaScript in a simple way. The code is compiled one-to-one into the equivalent JS. The compiled output is readable and pretty-printed, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript.