Terrific Frontends

  • View
    3.772

  • Download
    5

Embed Size (px)

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.

Text of Terrific Frontends

  • 1. TerrificModularize your code, scale down your problems

2. AgendaConceptTerrificJSTerrific ComposerQuestionsRemo Brunschwiler 14. August 2012 # 3 3. GithubTake it. Make it better. Together. 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. ShowcasesSee Terrific in action 6. Remo Brunschwiler 14. August 2012 # 7 7. ConceptIts really easy 8. Whats 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. Remo Brunschwiler 14. August 2012 # 10 10. Remo Brunschwiler 14. August 2012 # 10 11. Remo Brunschwiler 14. August 2012 # 11 12. Remo Brunschwiler 14. August 2012 # 11 13. Remo Brunschwiler 14. August 2012 # 12 14. Remo Brunschwiler 14. August 2012 # 12 15. Remo Brunschwiler 14. August 2012 # 13 16. Remo Brunschwiler 14. August 2012 # 13 17. Whats a terrific module made of? HTML CSS JavaScriptRemo Brunschwiler 14. August 2012 # 14 18. Whats a terrific module made of? HTML CSS JavaScriptRemo Brunschwiler 14. August 2012 # 14 19. TerrificJSSee how HTML, CSS & JS works together 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. 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. ExampleRemo Brunschwiler 14. August 2012 # 18 23. ExampleRemo Brunschwiler 14. August 2012 # 18 24. HTMLSimply mark your modules by giving them a module class

Remo Brunschwiler 14. August 2012# 19 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. 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. 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 theafter hookRemo Brunschwiler 14. August 2012# 22 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 moduleson the page are finished -> relevant for connectorsRemo Brunschwiler 14. August 2012# 23 29. SkinsExtends your modules on demand so you can apply differentbehaviours on the same module.Remo Brunschwiler 14. August 2012 # 24 30. ExampleRemo Brunschwiler 14. August 2012 # 25 31. HTMLSimply give your module one or more skin classes

Remo Brunschwiler 14. August 2012# 26 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. 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.() */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. ConnectorsLets your modules stay in touch with each other while remainingloosely coupled.Remo Brunschwiler 14. August 2012 # 29 35. ExampleRemo Brunschwiler 14. August 2012 # 30 36. HTMLSimply specify your communication channelstalk channel