kertal/magpieJS

Modular JavaScript Collection

MagpieJS

Experimental JavaScript research in front-end development that leverages module system and HTML5 features.

• Module Oriented Development: module is the contract.
• Easy HTML5 custom element declaration.
• HTML5 custom element based widgets in favour.
• Separated configurations.
• Resource loading.
• Router.
• Reusable core modules in backend.*

Module Oriented Development

Principle in 3 point:

1. Declare dependencies require(['log!main','config' ...,
2. Export what is needed,
3. Hide how is done.

Modules in focus.

• Compose them to achieve your goal.
• Break big code into smaller modules.
• Pick and choose module.
• Replace it with another.
• Wrap it into new one.

AMD module definition

Start up

Mentioned bootstrap (JS root folder) separation convention:

• 'lib' folder for libraries,
• 'magpie' folder for magpieJS name space,
• 'app' or custom folder for your application name space.
• 'config.js' bootstrap configuration,
• 'config.log.js' good practice to separate log configuration.

Include next script in your HTML page.

<script type="text/javascript" src="lib/require/require.js" data-main="app/config.js"></script>```

AMD module definition

RequireJS in background as AMD loader

example config.js

require.config({

	paths : {
		jquery : 	'jquery/jquery-1.11.2.min',
		knockout : 	'lib/knockout/knockout-3.4.0',
		domReady :	'lib/require/domReady',
		text :		'lib/require/text',
		css :		'lib/require/require-css/css',
		less : 		'magpie/dom/less'
	},

	shim : {
		jquery : {
			exports: '$'
		}
	},

	callback: require([
				'config.log', // separated log configuration file.
	        	'magpie/config', // bootstrap mapgie
	            'app/main' // bootstrap your app
				],
				function(){
					// initial callback
				}
	)
});

example config.log.js

require.config({
	config : {
		'magpie/log/main' : {
			root : {
				level : 'info'
			},
			'app/amin' : {
				level : 'debug'
			}
		}
	}
});

Stack Overview

Applciation	widgtes	modules	templates
	MV**	configurations	MV**	...
MagpieJS	HTML5 widgtes	logger	responsive design	extend
	m-grid	resurce loaders
	m-select	logger	grid system
	m-inject	config
		REST	{less}	...
	customElement	router		inject
polyfill
	HTLM5	JS API	CSS3	DOM
JS libs
	HTLM5* HTML	JS API	CSS3 CSS	DOM
Browser stack

 

Easy HTML5 widget

HTML5 custom element defines standard way for real HTML widgets with lifecycle callbacks. Imagine that <my-awsome-chat></my-awsome-chat> is your application. MV** choose is up to you.

You can do it so easy with MagpieJS, first define your custom tag:

example app/my-awsome-chat.js

define({
	tag: 'my-awsome-chat',
	createdCallback: function(){
		// called when an instance of the element is created

	},
	attachedCallback: function(){
		// called when an instance was inserted into the document

	},
	detachedCallback: function(){
		//an instance was removed from the document
	},
	attributeChangedCallback: function(attrName, oldVal, newVal){
		//called when an attribute was added, removed, or updated
	}
})

Register your custom tag when you need it, for example in dependencies of your app:

example app/my-awsome-chat.js

define(['log!app/main', 'mapgie/html5/customElement!app/my-awsome-chat'],
	function(log){
		// your app logic
	}
)

MapgieJS provides a default createdCallback function that look ups for template with the same path name as your custom element module name but with '.html' extension and inject.

@see more mapgie/html5/customElement

Main modules

• mapgie/log logging, logger provider
• mapgie/html5/customElement HTML5 custom element registration
• mapgie/html5/widget name space for HTML5 custom element based widgets
• mapgie/dom name space DOM manipulation and pure CSS solutions
• mapgie/extend name space for MagpieJS modules that extends 3rd party libraries
• mapgie/resource/properties
• mapgie/util/config
• mapgie/util/idgenerator

License

MIT license - https://github.com/csetea/magpieJS/blob/master/LICENSE.md