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....
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...
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...
What’s a terrific module made of?   HTML                               CSS   JavaScriptRemo Brunschwiler   14. August 2012...
TerrificJSSee how HTML, CSS & JS works together
Components   ‣ Modules (the real stars of Terrific)   ‣ Skins (extend your modules on demand)   ‣ Connectors (let your mod...
ModulesThe real stars of Terrific.Almost all of your code will find its place in one of the modules.Remo Brunschwiler   14...
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 ma...
CSSPrefix your module CSS rules – in OOCSS style – to prevent yourselffrom strange side-effects/* hero.css */.mod-hero {  ...
TerrificJS(function($) {    Tc.Module.Hero = Tc.Module.extend({        /**         * Initializes the Hero module.         ...
on(callback)Here goes all of your jQuery codeon: function(callback) {    var $ctx = this.$ctx,        self = this;     ......
after()Trigger the default state of your modulesafter: function() {    var $ctx = this.$ctx;     // trigger the first subm...
SkinsExtends your modules on demand – so you can apply differentbehaviours on the same module.Remo Brunschwiler   14. Augu...
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 m...
CSSPrefix your skin CSS rules.skin-hero-stealth pre {…}.skin-hero-xyz .mode {…}   ‣ skin CSS rules must be included after ...
TerrificJSTerrificJS skins are simply JavaScript decorators(function($) {    Tc.Module.Hero.Stealth = function(parent) {  ...
ConnectorsLets your modules stay in touch with each other while remainingloosely coupled.Remo Brunschwiler   14. August 20...
ExampleRemo Brunschwiler   14. August 2012   # 30
HTMLSimply specify your communication channels              talk channel<div class="mod mod-hero mod-hero-stealth" data-co...
CSSConnectors have no associated stylesRemo Brunschwiler   14. August 2012   # 32
TerrificJSThe modules fire() method is your talking device/** * Notifies all attached connectors about changes. * * @metho...
fire()In your «talking» moduleon: function(callback) {  var self = this,      $ctx = this.$ctx;    ...    // bind the subm...
onEvent()    In your «receiving» module(s)     /**      * Handles the incoming messages from the other superheroes      */...
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() {        v...
ApplicationRemo Brunschwiler   14. August 2012   # 40
registerModules()Registers all modules within your application   ‣ Finds all modules in the DOM (.mod)   ‣ Instantiates th...
start()Starts all registered Modules   ‣ Now the turn is at the modules (hooks)Remo Brunschwiler   14. August 2012        ...
SandboxRemo Brunschwiler   14. August 2012   # 43
SandboxGives your Modules the power to communicate with the Application   ‣ Add / remove modules on the fly (very useful f...
Terrific ComposerMakes your life easier…
Terrific ComposerFrontend Development Framework   ‣ Designed for building frontends / applications based on the     Terrif...
Terrific ComposerFrontend Development Framework   ‣ Designed for building frontends / applications based on the     Terrif...
Create                                      Add new Modules & Skins to your project.                                      ...
Open                                      The Open dialog provides you fast access to                                     ...
Inspect                                      The inspect mode shows you which modules                                     ...
… 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://t...
Thank you!
Terrific Frontends
Upcoming SlideShare
Loading in...5
×

Terrific Frontends

3,789

Published on

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.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,789
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. TerrificModularize your code, scale down your problems
    2. 2. AgendaConceptTerrificJSTerrific ComposerQuestionsRemo Brunschwiler 14. August 2012 # 3
    3. 3. GithubTake it. Make it better. Together.
    4. 4. 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
    5. 5. ShowcasesSee Terrific in action
    6. 6. Remo Brunschwiler 14. August 2012 # 7
    7. 7. ConceptIt’s really easy…
    8. 8. 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
    9. 9. Remo Brunschwiler 14. August 2012 # 10
    10. 10. Remo Brunschwiler 14. August 2012 # 10
    11. 11. Remo Brunschwiler 14. August 2012 # 11
    12. 12. Remo Brunschwiler 14. August 2012 # 11
    13. 13. Remo Brunschwiler 14. August 2012 # 12
    14. 14. Remo Brunschwiler 14. August 2012 # 12
    15. 15. Remo Brunschwiler 14. August 2012 # 13
    16. 16. Remo Brunschwiler 14. August 2012 # 13
    17. 17. What’s a terrific module made of? HTML CSS JavaScriptRemo Brunschwiler 14. August 2012 # 14
    18. 18. What’s a terrific module made of? HTML CSS JavaScriptRemo Brunschwiler 14. August 2012 # 14
    19. 19. TerrificJSSee how HTML, CSS & JS works together
    20. 20. 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
    21. 21. 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
    22. 22. ExampleRemo Brunschwiler 14. August 2012 # 18
    23. 23. ExampleRemo Brunschwiler 14. August 2012 # 18
    24. 24. 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
    25. 25. 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
    26. 26. 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
    27. 27. 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
    28. 28. 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
    29. 29. SkinsExtends your modules on demand – so you can apply differentbehaviours on the same module.Remo Brunschwiler 14. August 2012 # 24
    30. 30. ExampleRemo Brunschwiler 14. August 2012 # 25
    31. 31. 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
    32. 32. 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
    33. 33. 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
    34. 34. ConnectorsLets your modules stay in touch with each other while remainingloosely coupled.Remo Brunschwiler 14. August 2012 # 29
    35. 35. ExampleRemo Brunschwiler 14. August 2012 # 30
    36. 36. 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
    37. 37. CSSConnectors have no associated stylesRemo Brunschwiler 14. August 2012 # 32
    38. 38. 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
    39. 39. 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
    40. 40. 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
    41. 41. What we learned so far…Remo Brunschwiler 14. August 2012 # 36
    42. 42. What we learned so far…But how does the stuff get applied?Remo Brunschwiler 14. August 2012 # 36
    43. 43. ArchitectureRemo Brunschwiler 14. August 2012 # 37
    44. 44. BootstrapRemo Brunschwiler 14. August 2012 # 38
    45. 45. 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
    46. 46. ApplicationRemo Brunschwiler 14. August 2012 # 40
    47. 47. 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
    48. 48. start()Starts all registered Modules ‣ Now the turn is at the modules (hooks)Remo Brunschwiler 14. August 2012 # 42
    49. 49. SandboxRemo Brunschwiler 14. August 2012 # 43
    50. 50. 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
    51. 51. Terrific ComposerMakes your life easier…
    52. 52. 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
    53. 53. 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
    54. 54. 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
    55. 55. Open The Open dialog provides you fast access to all of your Modules and Pages.Remo Brunschwiler 14. August 2012 # 48
    56. 56. Inspect The inspect mode shows you which modules are in use on the current page.Remo Brunschwiler 14. August 2012 # 49
    57. 57. … Let’s see it in actionRemo Brunschwiler 14. August 2012 # 50
    58. 58. ImpactHow Terrific influences your frontend development
    59. 59. Reduced Complexity
    60. 60. Modular Development & TestingRemo Brunschwiler 14. August 2012 # 53
    61. 61. ReusabilityRemo Brunschwiler 14. August 2012 # 54
    62. 62. Remo Brunschwiler 14. August 2012 # 55
    63. 63. Questions?
    64. 64. More…
    65. 65. More…Lets keep talking ‣ http://terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi ‣ http://twitter.com/#!/brunschgiRemo Brunschwiler 14. August 2012 # 58
    66. 66. Thank you!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×