Component Based

Development

Hans Christian Reinl

Freelancer, Front-End Developer, Freiburg/Germany

drublic.de • info@drublic.de • @drublic

Projects

and others: github.com/drublic

Component Based

Development

TOC

Components?

Examples

Build a component

Components

Module, Widget, …

Component-based software engineering is a branch of software engineering that emphasizes the separation of concerns in respect of the wide-ranging functionality available throughout a given software system.

It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems.

~ Components in Software Engineering

Front-end

Different parts on a web page

Like jQuery plugins

Advantages

No context

Separation of concerns

Separation within a team

Sharing & reuse

Faster development

Updates for code get easier

Responsive by default

When to use?

Large websites

Web applications

Style Guides

Small web projects?

Component Libraries

User Interface Libraries

Forms, buttons, lists, messages, …

Bootstrap

Component Libraries

+ fast development

+ reusable

- might do more than you need

- DRY?

Microsoft.com

Image: Paravel Inc

Image: Trent Walton

Build a Component

Break down to a minimum

Flexibility

Structure

Markup

Styles

Functionality

Let’s go

Bower

A package manager for the web

Manage components automatically

$ npm install -g bower

Install easily

$ bower install css-modal

Think beyond

Use your own Git repositories

component

Yeoman

Recap

Components help with specificity

Build them out of context

Think about component libraries

Questions?

@drublic - info@drublic.de