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
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…
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.
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.
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.
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-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
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.
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.