Terrific Frontends
Upcoming SlideShare
Loading in...5
×
 

Terrific Frontends

on

  • 3,754 views

TerrificJS is a nice little JavaScript framework – based on jQuery – that helps you to modularize your JavaScript code in a very natural way....

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.

Statistics

Views

Total Views
3,754
Views on SlideShare
2,530
Embed Views
1,224

Actions

Likes
3
Downloads
13
Comments
0

16 Embeds 1,224

http://frontend-crashkurs.nx 406
http://local-frontend-crashkurs.com 254
http://backbone-tut 182
http://localhost 165
http://local.frontend-crashkurs 84
http://nx-frontendcrashkurs.loc 45
http://nx-frontendcrashkurs.nx.loc 35
http://frontend-crashkurs.namics.local 13
http://frontend-crashkurs 12
http://10.66.28.137 10
http://fe-students.nx 7
https://si0.twimg.com 5
https://twimg0-a.akamaihd.net 2
http://www.sfexception.com 2
http://www.linkedin.com 1
https://abs.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Terrific Frontends Terrific Frontends Presentation Transcript

  • TerrificModularize your code, scale down your problems
  • AgendaConceptTerrificJSTerrific ComposerQuestionsRemo Brunschwiler 14. August 2012 # 3
  • GithubTake it. Make it better. Together.
  • RepositoriesTerrificJS ‣ https://github.com/brunschgi/terrificjsTerrific Composer (Symfony2 Edition) ‣ https://github.com/brunschgi/terrific-composerTerrific Symfony2 Bundles ‣ https://github.com/brunschgi/TerrificCoreBundle ‣ https://github.com/brunschgi/TerrificComposerBundleRemo Brunschwiler 14. August 2012 # 5
  • ShowcasesSee Terrific in action
  • Remo Brunschwiler 14. August 2012 # 7
  • ConceptIt’s really easy…
  • What’s a module?web application module (n)1 : an independent unit of functionality that is part of the totalstructure of a web applicationhttp://www.slideshare.net/nzakas/scalable-javascript-application-architectureRemo Brunschwiler 14. August 2012 # 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
  • What’s a terrific module made of? HTML CSS JavaScriptRemo Brunschwiler 14. August 2012 # 14
  • What’s a terrific module made of? HTML CSS JavaScriptRemo Brunschwiler 14. August 2012 # 14
  • TerrificJSSee how HTML, CSS & JS works together
  • Components ‣ 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 # 16
  • ModulesThe real stars of Terrific.Almost all of your code will find its place in one of the modules.Remo Brunschwiler 14. August 2012 # 17
  • ExampleRemo Brunschwiler 14. August 2012 # 18
  • ExampleRemo Brunschwiler 14. August 2012 # 18
  • HTMLSimply 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>Remo Brunschwiler 14. August 2012 # 19
  • CSSPrefix your module CSS rules – in OOCSS style – to prevent yourselffrom strange side-effects/* hero.css */.mod-hero { ...}.mod-hero pre { ...}.mod-hero .bubble { ...}...Remo Brunschwiler 14. August 2012 # 20
  • TerrificJS(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 # 21
  • on(callback)Here goes all of your jQuery codeon: 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» hookRemo Brunschwiler 14. August 2012 # 22
  • after()Trigger the default state of your modulesafter: 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 connectorsRemo Brunschwiler 14. August 2012 # 23
  • SkinsExtends your modules on demand – so you can apply differentbehaviours on the same module.Remo Brunschwiler 14. August 2012 # 24
  • ExampleRemo Brunschwiler 14. August 2012 # 25
  • HTMLSimply 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>Remo Brunschwiler 14. August 2012 # 26
  • CSSPrefix 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 neededRemo Brunschwiler 14. August 2012 # 27
  • TerrificJSTerrificJS 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.$);Remo Brunschwiler 14. August 2012 # 28
  • ConnectorsLets your modules stay in touch with each other while remainingloosely coupled.Remo Brunschwiler 14. August 2012 # 29
  • ExampleRemo Brunschwiler 14. August 2012 # 30
  • HTMLSimply specify your communication channels talk channel<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>Remo Brunschwiler 14. August 2012 # 31
  • CSSConnectors have no associated stylesRemo Brunschwiler 14. August 2012 # 32
  • TerrificJSThe 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]) {Remo Brunschwiler 14. August 2012 # 33
  • fire()In your «talking» moduleon: 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; }); event data channels defaultAction callback();}Remo Brunschwiler 14. August 2012 # 34
  • onEvent() In your «receiving» module(s) /** * Handles the incoming messages from the other superheroes */ onMessage:function (data) { var $ctx = this.$ctx;onEvent data data = data || {}; if (data.name && data.message) { $(.bubble, $ctx).text(data.name + said: + data.message); } } Remo Brunschwiler 14. August 2012 # 35
  • What we learned so far…Remo Brunschwiler 14. August 2012 # 36
  • What we learned so far…But how does the stuff get applied?Remo Brunschwiler 14. August 2012 # 36
  • ArchitectureRemo Brunschwiler 14. August 2012 # 37
  • BootstrapRemo Brunschwiler 14. August 2012 # 38
  • BootstrapKickstarts the engine of your ApplicationBasic bootstrap(function($) { $(document).ready(function() { var $page = $(body); var application = new Tc.Application($page); application.registerModules(); application.start(); });})(Tc.$); here is where the magic happensRemo Brunschwiler 14. August 2012 # 39
  • ApplicationRemo Brunschwiler 14. August 2012 # 40
  • registerModules()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)Remo Brunschwiler 14. August 2012 # 41
  • start()Starts all registered Modules ‣ Now the turn is at the modules (hooks)Remo Brunschwiler 14. August 2012 # 42
  • SandboxRemo Brunschwiler 14. August 2012 # 43
  • SandboxGives 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 instancesRemo Brunschwiler 14. August 2012 # 44
  • Terrific ComposerMakes your life easier…
  • Terrific ComposerFrontend Development Framework ‣ Designed for building frontends / applications based on the Terrific concept ‣ Integrates TerrificJS ‣ Based on Symfony2 ‣ … still very youngRemo Brunschwiler 14. August 2012 # 46
  • Terrific ComposerFrontend 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!Remo Brunschwiler 14. August 2012 # 46
  • Create Add new Modules & Skins to your project. The Skeleton is generated for you so that you can start right away.Remo Brunschwiler 14. August 2012 # 47
  • Open The Open dialog provides you fast access to all of your Modules and Pages.Remo Brunschwiler 14. August 2012 # 48
  • Inspect The inspect mode shows you which modules are in use on the current page.Remo Brunschwiler 14. August 2012 # 49
  • … Let’s see it in actionRemo Brunschwiler 14. August 2012 # 50
  • ImpactHow Terrific influences your frontend development
  • Reduced Complexity
  • Modular Development & TestingRemo Brunschwiler 14. August 2012 # 53
  • ReusabilityRemo Brunschwiler 14. August 2012 # 54
  • Remo Brunschwiler 14. August 2012 # 55
  • Questions?
  • More…
  • More…Lets keep talking ‣ http://terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi ‣ http://twitter.com/#!/brunschgiRemo Brunschwiler 14. August 2012 # 58
  • Thank you!