Alexander Savin asavin

#Componentify it

One of the most amazing things about Web development is the scale of bycicle inventions. Pretty much every developer at some point decides to conquer a common problem by rewriting it from scratch. Reusing existing solutions is often difficult - they are likely to be tied to internal styles, libraries, build processes. This creates a nurturing ground where same features are implemented many, many times not only because developers think they can do it better, but also because there are too much of efforts to reuse existing solution without bringing up all the dependencies.

This blogpost is about Component approach. Components are designed to have as little dependencies as possible, relying on common web technologies, easily reusable and extendable. With component approach it's trivial to unplug parts of the app and replace them with other parts or improved version of the same component. There are certain principles to be considered when releasing new components, since the Component itself doe

	<div class="image_attachment">
	<div class="attachment_text">
	Update item photo<br />
	<small>(will replace old one)</small>
	</div>
	<div class="attachment_button">
	<% f.fields_for :assets do \|asset\| %>
	<%= asset.file_field :photo %>
	<% end %>
	</div>

	<div class="image_attachment">
	<div class="attachment_text">
	Update item photo<br />
	<small>(will replace old one)</small>
	</div>
	<div class="attachment_button">
	<%= f.fields_for :assets do \|asset\| %>
	<%= asset.file_field :photo %>
	<% end %>
	</div>

	<div class="md-slide-items md-slider" data-thumb-height="80"
	data-thumb-width="100" id="md-slider-1652" style="height: 420px;">
	<div class="md-slide-item slide-0" data-thumb="" data-timeout="7800"
	data-transition="">
	<div class="md-mainimg"></div>

	<div class="md-objects">
	<div class="md-object" data-height="35" data-start="0"
	data-stop="6900" data-width="148" data-x="137" data-y="175"
	style=

	buildTreeChart = (tags) ->
	tag-index = {}

	# Build tag index
	for tag in tags
	if tag-index[tag]
	tag-index[tag] += 1
	else
	tag-index[tag] = 1

	buildTreeChart = (tags) ->
	tags
	\|> group-by (-> it)
	\|> obj-to-pairs
	\|> map (-> [it[0], it[1].length])
	\|> sort-by (.1)
	\|> reverse
	\|> take 10
	\|> map (-> {name: it[0], size: it[1]})

	var content = '<p>Cookie policy disclaimer</p>';
	var disclaimer = require('cookie-disclaimer');
	disclaimer('body', content);

	{
	"name": "tip-theme",
	"description": "our theme for tooltips",
	"version": "0.0.1",
	"dependencies": {
	},
	"styles" : [
	"index.css"
	],
	"main": "index.css"

	function(it){
	return it[1];
	}

	function(it){
	return it;
	})(tags);