Not every project needs the full arsenal of a front-end framework.

Why FrenchDip

Performance can suffer from loading all of those unused bits of JavaScript.

Development can slow from steep learning curves.

A project that

- has little dynamic content to display OR

- has a back-end templating solution (PHP, JavaServer Pages, ASP.NET, etc.)

may be biting off more front-end framework than it will ever need to chew.

Chances are a front-end framework is being loaded simply to offer means to add custom functionality. This is where FrenchDipJS shines like a freshly baked baguette.

What FrenchDip

FrenchDip is a component wrapper that ties JavaScript classes defined in your project to instances of assigned DOM elements. This allows you to basically build your own framework.

How FrenchDip

Displays two different numbers HTML

Use the "data-frenchdip" attribute to request the JavaScript Class that needs to be invoked for an element. <p>Displays two different numbers</p> <div class="your-class-name" data-frenchdip="YourClass"></div> <div class="your-class-name" data-frenchdip="YourClass"></div> JavaScript

Create a JavaScript Class and register it with FrenchDip, provide the Class itself and then its name as a string. function YourClass() { // this.root - node tied to an instance // this.options - node's data-attr values this.root.innerHTML = Math.random(); } FrenchDip.register(YourClass, 'YourClass'); FrenchDipJS collects registered DOM elements, forEach's through them, and invokes a new instance of the requested Class for each one. If the name property is set on a registered component, the string form isn’t required as a second argument for FrenchDip.register(YourClass). If the name property is not set, FrenchDip requires the name as a string FrenchDip.register(YourClass, 'YourClass').

Install

Manual install from GitHub

Bower install:

Setup

Be sure FrenchDip loads before your app's JavaScript, otherwise it can get read in anywhere in your document. Head, body, below the footer, it's all good.