Component Based

Web-Development

Hans Christian Reinl

Freelancer, Front-End Developer, noch Freiburg

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

Projekte

und andere: github.com/drublic

Component Based

Web-Development

TOC

Components?

Beispiele

Module selbst bauen

Components

Module, Widget, …

Wikipedia:

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.

und führt aus:

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

~ Components in Software Engineering

Wie nochmal?

Aufteilung der Zuständigkeiten

Schwache Verzahnung

Unabhängig

Wiederverwendbar

Front-end

Verschiede “Teile” einer Website

Ähnlich wie jQuery Plugins

Andere Vorteile

Betrachtung ohne Kontext

Responsive

Bessere Verteilung innerhalb eines Teams

Schnellere Entwicklung

Leichtere Code-Updates

Wann verwenden?

Große Websites (“wide-ranging functionality”)

Web applications

Style Guides

Small web projects?

Ein Style Guide

~

Microsoft.com

Image: Paravel Inc

Image: Trent Walton

Components bauen

Runterbrechen auf ein Minimum (?)

Flexibilität im Auge behalten

Struktur

Markup

Styles

Functionality

Beispiel:CSS Modal

Code auf GitHub • Website

Component Libraries

User Interface Libraries

Forms, buttons, lists, messages, …

Bootstrap

Component Libraries

+ schnelle Entwicklung

+ einfache Wiederverwendbarkeit

- mehr Funktionalität als erwünscht

- DRY?

Bower

A package manager for the web

Automatisches management von Components

$ npm install -g bower

Einfaches Installieren

$ bower install css-modal

Weiterdenken…

Eigene Git Repositories mit Bower managen

component

Yeoman

Recap

Components helfen mit der Spezifizität

Betrachtung ohne Kontext

Component Libraries

Fragen?

@drublic - info@drublic.de