Terrific Frontends
67
-
Upload
remo-brunschwiler -
Category
Technology
-
view
3.797 -
download
5
description
TerrificJS is a nice little JavaScript framework – based on jQuery – that helps you to modularize your JavaScript code in a very natural way.The slides illustrate the concepts and features of TerrificJS to see how it helps you to reduce frontend complexity.The Terrific Composer is a Frontend Development Framework – based on Symfony2 – that aims to make your life easier. It takes the modularization approach of Terrific and provides you a project structure that enables you to start right away.
Transcript of Terrific Frontends
Modularize your code, scale down your problems
Terrific
Remo Brunschwiler 14. August 2012 #
Agenda
Concept
TerrificJS
Terrific Composer
Questions
3
GithubTake it. Make it better. Together.
Remo Brunschwiler 14. August 2012 #
Repositories
TerrificJS
‣ https://github.com/brunschgi/terrificjs
Terrific Composer (Symfony2 Edition)
‣ https://github.com/brunschgi/terrific-composer
Terrific Symfony2 Bundles
‣ https://github.com/brunschgi/TerrificCoreBundle
‣ https://github.com/brunschgi/TerrificComposerBundle
5
ShowcasesSee Terrific in action
Remo Brunschwiler 14. August 2012 # 7
ConceptIt’s really easy…
Remo Brunschwiler 14. August 2012 #
What’s a module?
web application module (n)
1 : an independent unit of functionality that is part of the total structure of a web application
http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
9
Remo Brunschwiler 14. August 2012 # 10
Remo Brunschwiler 14. August 2012 # 10
Remo Brunschwiler 14. August 2012 # 11
Remo Brunschwiler 14. August 2012 # 11
Remo Brunschwiler 14. August 2012 # 12
Remo Brunschwiler 14. August 2012 # 12
Remo Brunschwiler 14. August 2012 # 13
Remo Brunschwiler 14. August 2012 # 13
Remo Brunschwiler 14. August 2012 #
What’s a terrific module made of?
14
HTML CSS JavaScript
Remo Brunschwiler 14. August 2012 #
What’s a terrific module made of?
14
HTML CSS JavaScript
TerrificJSSee how HTML, CSS & JS works together
Remo Brunschwiler 14. August 2012 #
Components
16
‣ Modules (the real stars of Terrific)
‣ Skins (extend your modules on demand)
‣ Connectors (let your modules stay in touch with each other)
Remo Brunschwiler 14. August 2012 # 17
Modules
The real stars of Terrific. Almost all of your code will find its place in one of the modules.
Remo Brunschwiler 14. August 2012 # 18
Example
Remo Brunschwiler 14. August 2012 # 18
Example
Remo Brunschwiler 14. August 2012 # 19
Simply mark your modules by giving them a module class
<div class="mod mod-hero"> <!-- here comes your mr. terrific markup --></div>
<div class="mod mod-hero"> <!-- here comes your batman markup --></div>
<div class="mod mod-hero"> <!-- here comes your spiderman markup --></div>
HTML
Remo Brunschwiler 14. August 2012 # 20
Prefix your module CSS rules – in OOCSS style – to prevent yourself from strange side-effects
/* hero.css */.mod-hero { ...}
.mod-hero pre { ...}
.mod-hero .bubble { ...}
...
CSS
Remo Brunschwiler 14. August 2012 #
TerrificJS
21
(function($) { Tc.Module.Hero = Tc.Module.extend({ /** * Initializes the Hero module. */ init: function($ctx, sandbox, modId) { this._super($ctx, sandbox, modId); },
/** * Hook function to do all of your module stuff. */ on: function(callback) { ... callback(); },
/** * Hook function to trigger your events. */ after: function() { ... } });})(Tc.$);
Remo Brunschwiler 14. August 2012 #
Here goes all of your jQuery code
on: function(callback) { var $ctx = this.$ctx, self = this; ... // bind the submit event on the form $('form', $ctx).on('submit', function() { ... });
callback();}
‣ $ctx = module DOM node (.mod) -> ensures encapsulation
‣ callback() -> indicates that the module is ready for the
«after» hook
22
on(callback)
Remo Brunschwiler 14. August 2012 #
Trigger the default state of your modules
after: function() { var $ctx = this.$ctx;
// trigger the first submit to write the default message in the bubble $('form', $ctx).trigger('submit');}
‣ synchronized among modules, i.e. the «on» hook of all modules on the page are finished -> relevant for connectors
23
after()
Remo Brunschwiler 14. August 2012 # 24
Skins
Extends your modules on demand – so you can apply different behaviours on the same module.
Remo Brunschwiler 14. August 2012 # 25
Example
Remo Brunschwiler 14. August 2012 #
Simply give your module one or more skin classes
<div class="mod mod-hero skin-hero-stealth"> <!-- your stealth hero markup goes here --></div>
<div class="mod mod-news skin-hero-stealth skin-hero-xyz"> <!-- your stealth xyz hero markup goes here --></div>
26
HTML
Remo Brunschwiler 14. August 2012 #
Prefix your skin CSS rules
.skin-hero-stealth pre {…}
.skin-hero-xyz .mode {…}
‣ skin CSS rules must be included after the module CSS rules (specificity)
‣ inherits all styles of the module
‣ extends / overwrites them where needed
27
CSS
Remo Brunschwiler 14. August 2012 #
TerrificJS skins are simply JavaScript decorators
(function($) { Tc.Module.Hero.Stealth = function(parent) { /** * override the appropriate methods from the decorated module. * the former/original method may be called via parent.<method>() */ this.on = function(callback) { var $ctx = this.$ctx; // binding the stealth mode on / off events $('.on', $ctx).on('click', function() { ... });
... parent.on(callback); }; };})(Tc.$);
28
TerrificJS
Remo Brunschwiler 14. August 2012 # 29
Connectors
Lets your modules stay in touch with each other while remaining loosely coupled.
Remo Brunschwiler 14. August 2012 # 30
Example
Remo Brunschwiler 14. August 2012 #
Simply specify your communication channels
<div class="mod mod-hero mod-hero-stealth" data-connectors="talk"> <!-- here comes your talking mr. terrific markup --></div>
<div class="mod mod-hero mod-hero-stealth" data-connectors="talk"> <!-- here comes your talking batman markup… but also secret --></div>
<div class="mod mod-hero mod-hero-stealth" data-connectors="talk > <!-- here comes your talking spiderman markup… but also secret --></div>
31
HTML
talk channel
Remo Brunschwiler 14. August 2012 #
Connectors have no associated styles
32
CSS
Remo Brunschwiler 14. August 2012 #
The modules fire() method is your talking device
/** * Notifies all attached connectors about changes. * * @method fire * @param {String} event The event name * @param {Object} data The data to provide to your connected modules (optional) * @param {Array} channels A list containing the channel ids to send * the event to (optional) * @param {Function} defaultAction The default action to perform (optional) */fire: function(event, [data], [channels], [defaultAction]) {
33
TerrificJS
Remo Brunschwiler 14. August 2012 #
In your «talking» module
on: function(callback) { var self = this, $ctx = this.$ctx; ...
// bind the submit event on the form $('form', $ctx).on('submit', function () { var name = $('pre', $ctx).data('name'), message = $('.message', $ctx).val();
// write the current message in the bubble and notify the others self.fire('message', { name: name, message: message }, ['talk'], function () { $('.bubble', $ctx).text(message); });
return false; }); callback();}
34
fire()
event data channels defaultAction
Remo Brunschwiler 14. August 2012 #
In your «receiving» module(s)
/** * Handles the incoming messages from the other superheroes */onMessage:function (data) { var $ctx = this.$ctx;
data = data || {};
if (data.name && data.message) { $('.bubble', $ctx).text(data.name + ' said: ' + data.message); }}
35
onEvent()
onEvent data
Remo Brunschwiler 14. August 2012 #
What we learned so far…
36
Remo Brunschwiler 14. August 2012 #
What we learned so far…
36
But how does the stuff get applied?
Remo Brunschwiler 14. August 2012 #
Architecture
37
Remo Brunschwiler 14. August 2012 # 38
Bootstrap
Remo Brunschwiler 14. August 2012 #
Kickstarts the engine of your Application
Basic bootstrap
(function($) { $(document).ready(function() { var $page = $('body'); var application = new Tc.Application($page); application.registerModules(); application.start(); });})(Tc.$);
39
Bootstrap
here is where the magic happens
Remo Brunschwiler 14. August 2012 # 40
Application
Remo Brunschwiler 14. August 2012 #
Registers all modules within your application
‣ Finds all modules in the DOM (.mod)
‣ Instantiates the appropriate modules accordingly to the naming conventions
(e.g. .mod-hero instantiates Tc.Module.Hero)
‣ Decorates the module instances with the given skins
(e.g. .skin-hero-stealth decorates the Hero instance with the
Stealth decorator)
‣ Connects the modules with each other accordingly to the specified Connector communication channels
(e.g. all modules with the data-connectors="talk" attribute are connected)
41
registerModules()
Remo Brunschwiler 14. August 2012 #
Starts all registered Modules
‣ Now the turn is at the modules (hooks)
42
start()
Remo Brunschwiler 14. August 2012 # 43
Sandbox
Remo Brunschwiler 14. August 2012 #
Gives your Modules the power to communicate with the Application
‣ Add / remove modules on the fly (very useful for AJAX stuff)
‣ Subscribe / unsubscribe from connectors programmatically
‣ Access to config params
‣ Access to other module instances
44
Sandbox
Terrific ComposerMakes your life easier…
Remo Brunschwiler 14. August 2012 #
Terrific Composer
Frontend Development Framework
‣ Designed for building frontends / applications based on the Terrific concept
‣ Integrates TerrificJS
‣ Based on Symfony2
‣ … still very young
46
Remo Brunschwiler 14. August 2012 #
Terrific Composer
Frontend Development Framework
‣ Designed for building frontends / applications based on the Terrific concept
‣ Integrates TerrificJS
‣ Based on Symfony2
‣ … still very young
… melts dozens of best practices!
46
Remo Brunschwiler 14. August 2012 #
Add new Modules & Skins to your project. The Skeleton is generated for you so that you can start right away.
47
Create
Remo Brunschwiler 14. August 2012 #
The Open dialog provides you fast access to all of your Modules and Pages.
48
Open
Remo Brunschwiler 14. August 2012 #
The inspect mode shows you which modules are in use on the current page.
49
Inspect
Remo Brunschwiler 14. August 2012 #
… Let’s see it in action
50
ImpactHow Terrific influences your frontend development
Reduced Complexity
Remo Brunschwiler 14. August 2012 #
Modular Development & Testing
53
Remo Brunschwiler 14. August 2012 #
Reusability
54
Remo Brunschwiler 14. August 2012 # 55
Questions?
More…
Remo Brunschwiler 14. August 2012 #
More…
Lets keep talking
‣ http://terrifically.org
‣ https://github.com/brunschgi
‣ http://twitter.com/#!/brunschgi
58
Thank you!
