Starting

Front-End Projects

Hans Christian Reinl

Freelancer, Front-End Developer

Freiburg, soon Cologne

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

Projects

and others: github.com/drublic

Starting

Front-End Projects

TOC

DRY

Boilerplate Code

Tackling the Problems

Components

DRY

Repetition from project to project

Same tasks to set up development and deployment

Teams need consistency

Save time

Current approaches

Use a framework or boilerplate

Find differences to your workflow/preferences

Apply changes you need

Start coding

Frameworks and Boilerplates

_1 Frameworks and Boilerplates

Bootstrap

_1 Frameworks and Boilerplates

Foundation

_1 Frameworks and Boilerplates

HTML5 Boilerplate

_1 Frameworks and Boilerplates

Backbone Boilerplate

_1 Frameworks and Boilerplates

Hundreds of Forks,Frameworks & Themes

based on HTML5 Boilerplate

See the Wiki Page

_1 Frameworks and Boilerplates

It’s hard to choose

Current approaches

_2 Differences to your workflow/preferences

In HTML5 Boilerplate

• Use a build tool
• Integrate with backend framework
• Structure is more complex
• Testing
• …

_2 Differences to your workflow/preferences

In Bootstrap or Foundation

• A lot of unused code
• Structure is less complicated
• Other coding guidelines
• …

Current approaches

_3 Apply changes you need

Get to work

Code a lot before even starting

_4 Start coding

Finally…

Mission

Less coding to get started

HTML5 Boilerplate

A minimum of good defaults

Advantages

Faster starting point

Not much needs to be removed

You can learn a lot

Disadvantages

Missing opinionated features

Extending takes a lot of time

What needs extension?

A build tool

Preprocessors

Structure

Testing

Tackle the Problems

Back to Frameworks?

Problem solving

A build tool → GruntJS

Preprocessors → Sass/LESS, Coffee Script

Structure → BEM/SMACSS for CSS

Testing → Jasmine/Mocha, Karma

Just do it once

DRY FTW!

Ingredients

• Grunt Tasks
  • JSHint
  • Tests (w/ Jasmine)
  • Build process
• Scaffolding
  • Bower
• Documentation

Let’s take a look

It’s on GitHub \o/

INIT chains you

Mostly my style of writing coding

Try Yeoman

Easily scaffold projects how you like it

~

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.

and goes on:

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

~ Components in Software Engineering

What again?

Separation of concerns

Loosely coupled

Independent

Reusable

Front-end

Different parts of a web-page

Somehow similar to jQuery plugins

Some other advantages

Without context

Responsive by default

Easily distributable within a team

Faster development

Better maintenance

When to use?

Large websites (“wide-ranging functionality”)

Web applications

Style Guides

Small web projects?

Build components

Break down to a minimum (?)

But stay flexible

Structure

Markup

Styles

Functionality

An Example:CSS Modal

Code on GitHub • Website

Component Libraries

User Interface Libraries

Forms, buttons, lists, messages, …

Bootstrap

Component Libraries

+ fast development

+ easily reusable

- more functionality than needed

- DRY?

Recap

It’s all about our workflow

Find good defaults for yourself

Use existing frameworks

Questions?

@drublic - info@drublic.de

Slides: drublic.github.io/socoded-init