How PostCSS Made Me To Create My Own Components
Prelude.
Let me introduce myself, my name is Eduard Pochtar [ɛduʌrd pɒtʃtʌr], I’m front-end developer from Budapest. I’m at the very beginning of my developer journey but I already have something to share. I would like to share my version of component driven development.
P.S. Don’t judge me too harshly, I’m open minded and I’m opened to any feedback or help.
Beginning.
It was my 18th birthday, I’ve got Canon 400d as a present. I had no idea how to use it and what is good photography. But my desire to be a photographer was so strong that I have learned how to use camera and how to take good photos very quickly. I was taking photos of everything, trying to find my personal style in photography.
At some point i’ve understood that I need some place where I can share my work. I didn’t have money for personal website, so I decided to find some free service. I was satisfied with it. But not for a long time. Very quickly I decided to create my own website. As I didn’t have money, I had to develop it by myself. Developing a website seemed something unreal. I didn’t how to start what to learn. I have heard about flash at that time. Technology itself was really great, and I thought it was really easy to learn it. How I was wrong. Any way I decided to learn flash. After some time of learning flash and trying to understand how to develop website with flash my website was ready.
Step be step I was developing and improving my personal website. It got another version.
Very soon I’ve got some good offers for some other flash projects. After some projects I understood that creating websites is what I like. It was not a question any more, I decided to be front-end developer.
After some flash projects I understood that I need to move forwards and to learn HTML and CSS. At first I thought it would be very hard, but it was surprisingly easy.
I didn’t understand yet, but my journey as front-end developer has began. I’ve got some freelance projects very quickly.
First pre-processor
Learning web technologies I was completely by myself. I didn’t have anyone who could show me on my mistakes and teach me best practices, so I had to do it by myself. And it was really hard. It is hard to understand what is good and what is bad when you don’t have someone who can explain. Any way I understood that if want to get better as a front-end developer I always need to research how can I get better as a front-end developer, how my projects can get better. So I kept looking for new technologies, better practices, and other knowledge that can make me better as a developer, and I still do.
At that time I didn’t use any pre-processor and all my projects had one css file for all pages.
At some point I have discovered CSS pre-processors. I was really impressed! Comparing to vanilla CSS pre-processors have much more advantages like variables, mixins, nesting and much more. I don’t remember why I have chosen SASS, but it seemed better than LESS. With SASS I had to rethink my project’s code and file structure.
With CSS pre-processors I could better organise my CSS code, split to separate files and much more.
Automatisation. Build.
When you grow as a developer step by step you understand that you need to develop your workflow as well. That’s why very often developers start to use tools which they can setup for their need. For example at the very beginning you may use tools like CodeKit or something like that, but as soon as you understand importance of manual configuration, which can give better results, you start to use tools like node.js, grunt.js, gulp.js, webpack, jspm, etc. I was using CodeKit for my projects as a server and builder, but I understood that I need something that will give me more control over my code and optimisation. I switched to node.js and gulp.js.
Alternatives.
I understood that SASS is not the best tool, so I was always searching for some alternatives. It was really hard to find some.
But about a year ago I have discovered PostCSS:
I was impressed once again. PostCSS was something weird and great at the same time.
One of the most exciting about PostCSS was that it transforms CSS with JavaScript Plugins. Another exciting PostCSS feature was ability to use css variables from external js file. This gave me new better way to organise my projects.
But before that I didn’t know how it would be better to integrate PostCSS into my projects. The simplest way was to use it with gulp, but I didn’t like that idea. So I decided to find a better way for me.
Development Environment.
It was little bit challenging. I have heard about Harp.js, in spite of some of it’s disadvantages it could be good starting point, but it didn’t support PostCSS. I have opened issue ticket on github https://github.com/sintaxi/harp/issues/451, but unfortunately harp maintainers have another vision.
Searchings for other alternatives were without success until I have spoken with Andrey Sitnik (PostCSS founder). He advised me to try webpack.
OMG, Webpack.
Webpack was another weird tool. At first it was really hard to understand how it works and how to set it up. It had not the best documentation and I didn’t understand how to set up webpack for a long time. But using PostCSS in my projects was very important for me so I kept trying to setup webpack. I have found some articles about webpack, some examples and some boilerplates. After few days I finally had some environment where I can use PostCSS.
Inspiration.
While trying to make webpack to work I have noticed that mostly in every webpack boilerplate was something that was called react.js. React.js seemed very attractive. First thing I liked about it was it’s way of component driven development. Component with all it’s css and js dependencies were at one place:
hello-world
|- hello-world.pug
|- hello-world.js
|- hello-world.cssThis kind of development had big impact on my consciousness. But the problem was that webpack bundles html, js and css into one big js file and react has html and css in js. I don’t want to say that it’s bad or good, I would rather say that it has it’s advantages and disadvantages. As for me I don’t like that everything is in js and than bundled into one file.
Bundling everything to one file is great for SPA (single page application) like instagram or some dashboard.
PostCSS, Webpack and React had big impact on me. But I wasn’t satisfied with this kind of development environment and html, css bundled into js. So I started to search for another way, but this time I wanted to keep this new for me and great component drive development. Unfortunately I didn’t find anything that could satisfy my needs.
PostCSS made me to search for better tools, inspired me to better organise my CSS, make it more simple. Webpack and React.js gave me new vision of component driven development. All together it inspired me to create my own tool.
ADM-DEV-KIT 1.0.0
Main goal was to develop a tool that will have the same or similar approach to component driven development but bundle html, js and css separately.
One of the first biggest challenge was to find a way how to import all component’s dependencies in component itself like for example webpack can do:
const pug = require(“./hello-world.pug”);
const js = require(“./hello-world.js”);
const css = require(“./hello-world.css”);After some researches I have understood that it can be done like this:
link(href=”hello-world.css” type=”text/css” rel=”stylesheet”)
.hello-world
h1 Hello, World!
script(src=”hello-world.js” type=”text/javascript”)Next challenge was to find a way to extract all those css and js files from html and than remove unnecessary html tags. Fortunately I have found gulp plugin that could help me with that. I decided that there will be some main pages/sections (index page, about page, etc.) which will include all their components, and based on those main pages/sections js and css will be extracted, concatenated to the file related to page/section and then minified. So every main page/section will have it’s separate js and css in production.
Usually to use variables, they should be imported somewhere to be inherited by all css files. But from now on all my css files were separated from each other, they couldn’t inherit variables from each other but I still wanted to use them. To solve this problem, instead of using PostCSS existing plugins, I decided to create PostCSS Plugin — PostCSS Inject, that can inject any css file into another css file. I’m using it for injecting variables only.
Gulp was used for development and building project for production.
Thanks to ADM-DEV-KIT 1.0.0 I had true components, components that are independent from each other. There was no need to keep pug, js and css separately from each other.
ADM-DEV-KIT 2.0.0
But the problem with first version was that it was really slow. As page got more css and js, gulp task was getting slower and slower, because it had to extract more and compile more. It might be not a problem for bundling but it is a problem while developing. It was ruining experience of using ADM-DEV-KIT. It had to be changed.
To solve performance issue I decided to try express.js. So now I had express for development and gulp for building for production.
But the problem was that there were a lot of link and script tags inside the body tag. As it turned out it is not a problem while developing. Yes, it seems a little bit strange at first but not so strange like html or css in js. Of course they are removed for production.
To compile CSS there is PostCSS Middleware for express, so there were no problems with CSS. But there were some issues with JS. First of all I had to find a better way use third party libraries like angular, jquery or any other. To solve this problem I decided to use JSPM. It solves this problem very well, it also gives ability to use ES6 and some other advantages. Import of js file with JSPM looks like this:
link(href=”hello-world.css” type=”text/css” rel=”stylesheet”)
.hello-world
h1 Hello, World!
script. System.import(‘hello-world.js’)It worked while developing but for production it didn’t work because gulp couldn’t extract js from jspm’s “System.import”. To solve this issue I developed PostHTML plugin — PostHTML JSPM Config Generator, that will create separate jspm file for each main page/section that will import all it’s js dependencies:
‘use strict’
import ‘hello-world/hello-world.js’ADM-DEV-KIT 2.0.0 comparing to 1.0.0 has speed improvements and JSPM for bundling JavaScript and some other features.
ADM-DEV-KIT 2.5.0
ADM-DEV-KIT is much faster and better, but the problem was while starting new project I had to copy all server and gulp files over and over again. And I thought there should be a better way to do that. So I decided to create npm package. The only problem was that as ADM-DEV-KIT turned into npm package it was a little bit harder to setup development environment, so I created ADM DEV KIT INIT PROJECT. ADM DEV KIT INIT PROJECT is kind of command line tool focused to help init ADM DEV KIT project:
It should be installed globally:
npm i -g adm-dev-kit-init-projectAnd then all you have to do is to run:
adm // init projectnpm i // install dependenciesnpm start // to run server
gulp // to build for production
Links
The End.
Searching for something better is very important especially if you want to be better no matter what you do. There is always something better. ADM-DEV-KIT doesn’t claim to be better than Webpack or similar tools, I just tried to solve those problems I have faced. ADM-DEV-KIT is my step in search of something better.
PostCSS, Webpack and React inspired me to create ADM-DEV-KIT.
Thanks to PostCSS I’ve got this unforgettable journey.
I hope ADM-DEV-KIT will get better and better.
P.S.
Article about how to setup and how to use ADM-DEV-KIT is coming up.
