TerrificModularize your code, scale down your problems
AgendaWhat exactly is Terrific? ‣ TerrificJS ‣ TerrificBasics ‣ OOCSS ‣ JavaScriptSee TerrificJS in Action ‣ jsFiddle ‣ Re...
What exactly isTerrific?
The two sides of TerrificTerrific comes in two flavors ‣ TerrificJS ‣ Terrific                                #   5
TerrificJSOnly the coolest part
TerrificJSTerrific JavaScript Framework ‣ JavaScript Library based on jQuery ‣ Very small footprint ‣ Modularizes your Jav...
TerrificYou will never miss it again
TerrificFrontend Development Framework ‣ Based on Symfony 2 ‣ Integrates TerrificJS ‣ Modularizes all of your Frontend Cod...
TerrificOriginal Intentions ‣ Providing a standardized, efficiently and easy to use   environment for Frontend Engineers ‣...
TerrificMain Purposes ‣ Applications (based on PHP) ‣ Rapid Prototyping ‣ Templating (HTML / CSS / JavaScript)            ...
BasicsWithout them you are lost
OOCSSThe basics of Object Oriented CSS
Whats wrong with plain CSS?Code is too fragile ‣ Even the cleanest code gets ruined by the first non-expert to   touch it ...
Whats wrong with plain CSS?Development in teams is very hard ‣ The CSS rules affect each other ‣ Parallelization is almost...
Whats wrong with plain CSS?Code re-use is almost inexistent ‣ People do not trust other developers code ‣ Writing it from ...
OOCSSDeveloped by Yahoo (mainly Nicole Sullivan)Goals ‣ Predictable behavior of markup ‣ Eliminated side effects ‣ Re-usab...
OOCSS and TerrificComponents ‣ Elements ‣ Layout ‣ Grid ‣ Modules ‣ Skins                     #   18
ElementsBase definitions  /* Link */  a.base {  	   color: #434343;  	   text-decoration: underline;  }Naming convention ‣...
LayoutDivision in separated areas which are common to most pages                                                          ...
Layout<div class="page">	      <div class="head">	      	      <h2>Head</h2>	      </div>	      <div class="body">	      	...
GridPage specific division in lines and units                                            # 22
Grid<div class="line">	      <div class="unit size1of5">	      	      <h3>1/5</h3>	      </div>	      …	      <div class="...
ModulesContent Modules - The most important component                                                 # 24
ModulesHTML<div class="mod modCurrencyConverter">    <div class="inner">        <div class="bd">            <h1 class="bas...
SkinsModule Skins ‣ Inherit all module styles ‣ Able to override existing styles or define new styles                     ...
SkinsHTML<div class="mod modCurrencyConverter skinCurrencyConverterHighlighted">    <div class="inner”>        <div class=...
Layout / Gridhttp://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-a j...
Moduleshttp://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-a jax-exp...
OOCSS in ActionRepower Intranet
Layout         #   31
Grid / Modules                 # 32
ConclusionWhat we learned so far…
TerrificOOCSS ‣ Eliminates side effects ‣ Allows us to structure and modularize HTML and CSS in a very   clean and concise...
TerrificJSThe basics of the coolest part
TerrificJSGoals ‣ Lightweight architecture ‣ Modularized Development ‣ Scalable ‣ Easy to integrate                       ...
TerrificJSThoughts ‣ All the functionality is in the modules / layouts ‣ The markup is highly standardized through OOCSSId...
BootstrapEvery Terrific page / application has an identical bootstrap  var $page = $(’.page’),      application = new Tc.A...
Bootstrap – registerModulesRegisters all modules within your application ‣ Find all modules in the DOM (.mod) ‣ Instantiat...
Bootstrap – startStarts all registered ModulesEvery Module has 4 phases (Hooks) ‣ dependencies ‣ beforeBinding ‣ onBinding...
CurrencyConverter ExampleFunctionality ‣ Ajax Live-Convertion ‣ Non-JavaScript Fallback with Convert Button               ...
CurrencyConverter Exampledependencies phase /**   * Hook function to load the module specific dependencies.   *   * @metho...
CurrencyConverter ExamplebeforeBinding phase beforeBinding: function(callback) {     $(input[type=submit], this.$ctx).hide...
CurrencyConverter ExampleonBinding phase onBinding: function() {     var that = this;     // bind the keyup event to start...
CurrencyConverter ExampleafterBinding phase  afterBinding: function() {      $(.converter, this.$ctx).trigger(submit);  }T...
More TerrificJS FeaturesWe just covered the bootstrap and the module basicsBut there are a lot more to explore ‣ Skins (Mo...
See TerrificJSin ActionFool around with Mr. Terrific and his friends
Playhttp://www.terrifically.org/learn/play/ ‣ Fool around with Mr. Terrific and his friends ‣ Includes jsFiddle examples  ...
Real WebsitesSee TerrificJS in action on some big company websites                                                        ...
Look into a terrificfuture
Terrific is OpenSourceTerrificJS  ‣ has been launched in July 2011  ‣ for more info visit http://www.terrifically.org  ‣ I...
More…
More…Lets keep talking ‣ http://www.terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi/terrificjs ‣ h...
Terrific Javascript Framework
Upcoming SlideShare
Loading in …5
×

Terrific Javascript Framework

4,184 views

Published on

Terrific is an Open Source project that comes in two flavours:

TerrificJS
-----------
TerrificJS is a neat, clever piece of code that allows you to modularize your jQuery code by solely relying on the OOCSS naming conventions.

So simple, so effective! TerrificJS helps you to structure your project in a way you have never dreamt of. Try the magic and get addicted.

Terrific
-------
Terrific melts TerrificJS, OOCSS and hundreds of best practices.
The result is a frontend development framework that is extremely powerful and intuitive to use. You will never miss it again!

Terrific is coming soon and will be released as a bundle for Symfony2.

For more info visit http://www.terrifically.org

Published in: Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
4,184
On SlideShare
0
From Embeds
0
Number of Embeds
1,037
Actions
Shares
0
Downloads
0
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Terrific Javascript Framework

  1. 1. TerrificModularize your code, scale down your problems
  2. 2. AgendaWhat exactly is Terrific? ‣ TerrificJS ‣ TerrificBasics ‣ OOCSS ‣ JavaScriptSee TerrificJS in Action ‣ jsFiddle ‣ Real Websites # 3
  3. 3. What exactly isTerrific?
  4. 4. The two sides of TerrificTerrific comes in two flavors ‣ TerrificJS ‣ Terrific # 5
  5. 5. TerrificJSOnly the coolest part
  6. 6. TerrificJSTerrific JavaScript Framework ‣ JavaScript Library based on jQuery ‣ Very small footprint ‣ Modularizes your JavaScript Code… most of the innovation goes here! # 7
  7. 7. TerrificYou will never miss it again
  8. 8. TerrificFrontend Development Framework ‣ Based on Symfony 2 ‣ Integrates TerrificJS ‣ Modularizes all of your Frontend Code – HTML, CSS and JS – in a way you have never experienced before!… melts hundreds of best practices! # 9
  9. 9. TerrificOriginal Intentions ‣ Providing a standardized, efficiently and easy to use environment for Frontend Engineers ‣ Modularization of the Frontend Code that allows for parallelization ‣ Separation of Frontend Engineering and Backend systems (ie. CMS, view technologies like JSP etc.) # 10
  10. 10. TerrificMain Purposes ‣ Applications (based on PHP) ‣ Rapid Prototyping ‣ Templating (HTML / CSS / JavaScript) # 11
  11. 11. BasicsWithout them you are lost
  12. 12. OOCSSThe basics of Object Oriented CSS
  13. 13. Whats wrong with plain CSS?Code is too fragile ‣ Even the cleanest code gets ruined by the first non-expert to touch it # 14
  14. 14. Whats wrong with plain CSS?Development in teams is very hard ‣ The CSS rules affect each other ‣ Parallelization is almost not possible… sort of like a game of poker # 15
  15. 15. Whats wrong with plain CSS?Code re-use is almost inexistent ‣ People do not trust other developers code ‣ Writing it from scratch is often faster and leads to more elegant and concise codeConsequence ‣ File size just keeps getting bigger… and performance problems will come your way # 16
  16. 16. OOCSSDeveloped by Yahoo (mainly Nicole Sullivan)Goals ‣ Predictable behavior of markup ‣ Eliminated side effects ‣ Re-usable components # 17
  17. 17. OOCSS and TerrificComponents ‣ Elements ‣ Layout ‣ Grid ‣ Modules ‣ Skins # 18
  18. 18. ElementsBase definitions /* Link */ a.base { color: #434343; text-decoration: underline; }Naming convention ‣ Use .base as suffix ‣ Modules can decide whether to use the base style or not # 19
  19. 19. LayoutDivision in separated areas which are common to most pages # 20
  20. 20. Layout<div class="page"> <div class="head"> <h2>Head</h2> </div> <div class="body"> <div class="leftCol"> <h2>Left Column</h2> </div> <div class="rightCol"> <h2>Right Column</h2> </div> <div class="main"> <h2>Main Content</h2> </div> </div> <div class="foot"> <h2>Foot</h2> </div></div> # 21
  21. 21. GridPage specific division in lines and units # 22
  22. 22. Grid<div class="line"> <div class="unit size1of5"> <h3>1/5</h3> </div> … <div class="unit size1of5 lastUnit"> <h3>1/5</h3> </div></div><div class="line"> <div class="unit size2of5"> <h3>2/5</h3> </div> <div class="unit size3of5 lastUnit"> <h3>3/5</h3> </div></div> # 23
  23. 23. ModulesContent Modules - The most important component # 24
  24. 24. ModulesHTML<div class="mod modCurrencyConverter"> <div class="inner"> <div class="bd"> <h1 class="base">Currency Calculator</h1> ... </div> </div></div>CSS.modCurrencyConverter .bd { background: #fff; padding: 10px 10px 18px 10px;}… # 25
  25. 25. SkinsModule Skins ‣ Inherit all module styles ‣ Able to override existing styles or define new styles # 26
  26. 26. SkinsHTML<div class="mod modCurrencyConverter skinCurrencyConverterHighlighted"> <div class="inner”> <div class="bd"> <h1 class="base">Currency Calculator</h1> ... </div> </div></div>CSS.skinCurrencyConverterHighlighted .bd { background: #aebbcb;} # 27
  27. 27. Layout / Gridhttp://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-a jax-experience-2009 # 28
  28. 28. Moduleshttp://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-a jax-experience-2009 # 29
  29. 29. OOCSS in ActionRepower Intranet
  30. 30. Layout # 31
  31. 31. Grid / Modules # 32
  32. 32. ConclusionWhat we learned so far…
  33. 33. TerrificOOCSS ‣ Eliminates side effects ‣ Allows us to structure and modularize HTML and CSS in a very clean and concise way… but what about the JavaScript Part? # 34
  34. 34. TerrificJSThe basics of the coolest part
  35. 35. TerrificJSGoals ‣ Lightweight architecture ‣ Modularized Development ‣ Scalable ‣ Easy to integrate # 36
  36. 36. TerrificJSThoughts ‣ All the functionality is in the modules / layouts ‣ The markup is highly standardized through OOCSSIdea ‣ Why not using the OOCSS naming conventions for the JavaScript Part? # 37
  37. 37. BootstrapEvery Terrific page / application has an identical bootstrap var $page = $(’.page’), application = new Tc.Application(); application.registerModules($page); application.start(); # 38
  38. 38. Bootstrap – registerModulesRegisters all modules within your application ‣ Find all modules in the DOM (.mod) ‣ Instantiate the appropriate modules accordingly to the OOCSS naming conventions (ie. .modNews instantiates Tc.Module.News) ‣ Decorate the module instances with the given skins (ie. .skinNewsHighlighted decorates the News instance with the Highlighted decorator) ‣ Connect the modules with each other accordingly to the specified Connector communication channels (ie. all modules with the data-connectors=”1” attribute are connected) # 39
  39. 39. Bootstrap – startStarts all registered ModulesEvery Module has 4 phases (Hooks) ‣ dependencies ‣ beforeBinding ‣ onBinding ‣ afterBindingEach of this hooks are optional – if you don’t need them, kill them! # 40
  40. 40. CurrencyConverter ExampleFunctionality ‣ Ajax Live-Convertion ‣ Non-JavaScript Fallback with Convert Button # 41
  41. 41. CurrencyConverter Exampledependencies phase /** * Hook function to load the module specific dependencies. * * @method dependencies * @return void */ dependencies: function() { this.require(jquery.throttle-debounce.min.js, plugin, onBinding); }Lazy loads the debounce Plugin ‣ The plugin will be ready in the onBinding phase ‣ Terrific takes care of the timing and the appropriate callbacks # 42
  42. 42. CurrencyConverter ExamplebeforeBinding phase beforeBinding: function(callback) { $(input[type=submit], this.$ctx).hide(); callback(); }Hides the convert buttonTo consider ‣ Execute the callback method at the end to launch the next phase ‣ this.$ctx contains the module DOM node, so everything just happens for the current module instance # 43
  43. 43. CurrencyConverter ExampleonBinding phase onBinding: function() { var that = this; // bind the keyup event to start the conversion. To reduce the number // of ajax calls, the debounce plugin is used. $(.amount, this.$ctx).keyup($.debounce(250, function() { var $this = $(this).closest(form); var url = $this.attr(action) + ? + $this.serialize(); // ajax stuff etc. … return false; })); ... } # 44
  44. 44. CurrencyConverter ExampleafterBinding phase afterBinding: function() { $(.converter, this.$ctx).trigger(submit); }Triggers the first calculation with the current value # 45
  45. 45. More TerrificJS FeaturesWe just covered the bootstrap and the module basicsBut there are a lot more to explore ‣ Skins (Module Decorators) ‣ Layout Modules (site wide functionalities – ie. Drag’n Drop etc.) ‣ Connectors (let your modules talk with each other) ‣ Sandbox (get additional resources etc.) ‣ … # 46
  46. 46. See TerrificJSin ActionFool around with Mr. Terrific and his friends
  47. 47. Playhttp://www.terrifically.org/learn/play/ ‣ Fool around with Mr. Terrific and his friends ‣ Includes jsFiddle examples # 48
  48. 48. Real WebsitesSee TerrificJS in action on some big company websites # 49
  49. 49. Look into a terrificfuture
  50. 50. Terrific is OpenSourceTerrificJS ‣ has been launched in July 2011 ‣ for more info visit http://www.terrifically.org ‣ I’m very curious about your feedback ;-)Terrific ‣ I’m currently waiting for the stable release of Symfony2 and Symfony2 Standard ‣ I’m currently experimenting with the new Symfony2 featuresTimeline ‣ End 2011: Launch of Terrific # 51
  51. 51. More…
  52. 52. More…Lets keep talking ‣ http://www.terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi/terrificjs ‣ http://www.facebook.com/beTerrific ‣ http://twitter.com/#!/brunschgiOOCSS ‣ http://oocss.org/ # 53

×