ORIGINAL WEB FRAMEWORK

I have a friend who is a professional web developer. My friend was very excited by this presentation about Backbone and Marionette by Amy Palamountain.

I decided to watch it because my friend was so excited, and also because Amy Palamountain, like me, is from New Zealand.

I really loved the video, partly because I could understand Amy's accent, but mostly because I loved the concept of making a web application easy to program and maintain by using completely separate modules, with one "application" module to coordinate all the others.

The main advantage of this framework is that as an application grows, it doesn't become exponentially more difficult to program, and also in the future the application is very easy to change and add to.

When I learned more about Backbone and Marionette I realised I didn't need most of the features for the kind of programming I was doing.

I thought, "I wonder if I could make my own framework with just the features I need?"

I wanted each module to have:

• name
• HTML (structure)
• CSS (style)
• JavaScript (functionality)
• events (publish/subscribe/unsubscribe)
• data

This means there's a place for everything and everything is in its place.

• If I want to change the style of one module, there is only one place to do it.
• If I want to change the functionality of one module, there is only one place to do it.
• If I want to change the response of one module to an event, there is only one place to do it.

Here's how I define a module.

• name is a string
• HTML is a string
• CSS is an array of strings
• JavaScript is a function
• events is an object containing functions
• data is an object

Here's the basic format of a module definition.

app.add_module({
  name: "",
  html: "",
  css: ["", ""],
  js: function() {},
  event_listeners: {eventname: function() {}},
  data: {}
});

Here's a simple example.

• The "application" module coordinates the other modules "top" and "bottom".
• The "top" module has a button - if you click the button, the module dispatches an event.
• The "bottom" module has a checkbox - if you change the checkbox, the module dispatches an event.
• The "top" and "bottom" modules listen for events and respond to them.

Years later when I need to add a feature to one of my web apps, even if I can't remember how I made the app, I can quickly go to exactly the right place to make a change. I know that even if the change doesn't work perfectly at first, the rest of the app will keep working. My original web framework helps me make web apps using best practices, and helps me keep them up to date and running smoothly. Thank you Amy Palamountain!