Frontend development

I’ve always worked as “full” web developer, i would do the Frontend, Backend and backoffice implementation of a website, but since February 2014 i started working as a frontend developer at a company called NOS.

I was used to develop directly in python, aspx and php, i already had my own preferences, i had already chosen the frameworks i liked. For python i used Django, for aspx i used framework that gives you an already built backoffice and a dynamic database that would fit almost any client and for php i created my own development framework based on the prado framework. For databases i used mysql and mssql.

The new Challenge

Frontend delevoper

But now, i’m a Frontend delevoper, and doing just html, css and javascript was weird for me, i lacked the methodology of working as a frontend developer. Lucky me, when i started to work at NOS i got the challenge to develop my own frontend framework that would be used by my teams members.

1º The need

First i had to think, what does the backend development team needs from us?, and i got to the conclusion that they need the html by modules, we can’t send them a full static page in html, it’s to much lines of code, to much confusion and it’s just to much…

2º Jekyll

So my second question was, how can i trim my output work but still have a full static page so i can see the result?, and i’ve found the answer in jekyll. With this tool i could export just a single module but i could also export the full result, it’s a two in one win.

logo-2x

3º Sass and Compass

My third question was about frontend components, like a dropdown menu or a simple calendar, how can i have prebuilt components that i could use multiple times around multiple websites?, i could get the html of this to work with jekyll, building this components as modules and use them whenever i wanted, but what about the css?, i needed the same effect, and i came across sass and compass.

power

4º Framework

Now i have, jekyll, sass and compass, i have modules of html that i can include with jekyll and modules of css that i can import with sass. My next question would obviously be, how can i create a framework where i could store all the components i’m going to create and include that framework in all the projects i’m going to develop? The framework needed to be able to update itself without destroying the other projects and new components when added needed be available in all the projects with the minimum of work possible. This is where git entered, the framework would be a submodule of all projects so when i updated the framework all the projects would have the updated framework with the new bug fixes and new components release. We called it Warp Framework.

blackhole-icon

5º File Structure

The last problem i had was the File Structure of the projects. And again, i asked my self a question, how can i structure a project so everyone that comes in the company understands what we do? And this is what i came up with:

_assets
    framework
    sass
_site
site-source
    _includes
    _layouts
    snippets
    static
  • _assets: folder that contains the framework and sass
    • framework: git submodel for the framework, containing all components(html and css)
    • sass: folder with the sass of the current project, get compiled to the static folder inside site-source
  • _site: compiled website html and css along with source javascript to be delivered to the Backend team
  • site-source: folder containing the web pages, layouts, modules used in the project, html snippets and static files
    • _includes: html modules
    • _layouts: webpages layouts
    • snippets: this folder will be exported with html snippets for all the modules
    • static: contains css, fonts, images and javascript files

The underscore in the folders is used so jekyll skips this folders while he is compiling the _site folder. This way, jekyll will only read the site-source folder and the Backend team will only need to see the _site folder.

You might have noticed that i removed the javascript from the equation while i talked about my development environment, the reason is that we don’t need anything to work with javascript, in NOS, we deliver all the javascript files we developed to the Backend team and they compile them to make just one file that is included in the website.

So this is it, we are now using jekyll, sass, compass, git and the Warp Framework for all our projects.

If you need a more precise info in how to make this all come together, leave a comment bellow or talk to me in facebook.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s