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

2. Terrific
Modularize your code, scale down your problems

3. Agenda
What exactly is Terrific?
‣ TerrificJS
‣ Terrific
Basics
‣ OOCSS
‣ JavaScript
See TerrificJS in Action
‣ jsFiddle
‣ Real Websites
# 3

4. What exactly is
Terrific?

5. The two sides of Terrific
Terrific comes in two flavors
‣ TerrificJS
‣ Terrific
# 5

6. TerrificJS
Only the coolest part

7. TerrificJS
Terrific JavaScript Framework
‣ JavaScript Library based on jQuery
‣ Very small footprint
‣ Modularizes your JavaScript Code
… most of the innovation goes here!
# 7

8. Terrific
You will never miss it again

9. Terrific
Frontend 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

10. Terrific
Original 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

11. Terrific
Main Purposes
‣ Applications (based on PHP)
‣ Rapid Prototyping
‣ Templating (HTML / CSS / JavaScript)
# 11

12. Basics
Without them you are lost

13. OOCSS
The basics of Object Oriented CSS

14. Whats wrong with plain CSS?
Code is too fragile
‣ Even the cleanest code gets ruined by the first non-expert to
touch it
# 14

15. 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

16. 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 code
Consequence
‣ File size just keeps getting bigger
… and performance problems will come your way
# 16

17. OOCSS
Developed by Yahoo (mainly Nicole Sullivan)
Goals
‣ Predictable behavior of markup
‣ Eliminated side effects
‣ Re-usable components
# 17

18. OOCSS and Terrific
Components
‣ Elements
‣ Layout
‣ Grid
‣ Modules
‣ Skins
# 18

19. Elements
Base 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

20. Layout
Division in separated areas which are common to most pages
# 20

21. 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

22. Grid
Page specific division in lines and units
# 22

23. 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

24. Modules
Content Modules - The most important component
# 24

25. Modules
HTML
<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

26. Skins
Module Skins
‣ Inherit all module styles
‣ Able to override existing styles or define new styles
# 26

27. Skins
HTML
<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

28. Layout / Grid
http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-a jax-experience-2009
# 28

29. Modules
http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-a jax-experience-2009
# 29

30. OOCSS in Action
Repower Intranet

31. Layout
# 31

32. Grid / Modules
# 32

33. Conclusion
What we learned so far…

34. Terrific
OOCSS
‣ 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

35. TerrificJS
The basics of the coolest part

36. TerrificJS
Goals
‣ Lightweight architecture
‣ Modularized Development
‣ Scalable
‣ Easy to integrate
# 36

37. TerrificJS
Thoughts
‣ All the functionality is in the modules / layouts
‣ The markup is highly standardized through OOCSS
Idea
‣ Why not using the OOCSS naming conventions for the
JavaScript Part?
# 37

38. Bootstrap
Every Terrific page / application has an identical bootstrap
var $page = $(’.page’),
application = new Tc.Application();
application.registerModules($page);
application.start();
# 38

39. Bootstrap – registerModules
Registers 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

40. Bootstrap – start
Starts all registered Modules
Every Module has 4 phases (Hooks)
‣ dependencies
‣ beforeBinding
‣ onBinding
‣ afterBinding
Each of this hooks are optional – if you don’t need them, kill them!
# 40

41. CurrencyConverter Example
Functionality
‣ Ajax Live-Convertion
‣ Non-JavaScript Fallback with Convert Button
# 41

42. CurrencyConverter Example
dependencies 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

43. CurrencyConverter Example
beforeBinding phase
beforeBinding: function(callback) {
$('input[type=submit]', this.$ctx).hide();
callback();
}
Hides the convert button
To 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

44. CurrencyConverter Example
onBinding 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

45. CurrencyConverter Example
afterBinding phase
afterBinding: function() {
$('.converter', this.$ctx).trigger('submit');
}
Triggers the first calculation with the current value
# 45

46. More TerrificJS Features
We just covered the bootstrap and the module basics
But 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

47. See TerrificJS
in Action
Fool around with Mr. Terrific and his friends

48. Play
http://www.terrifically.org/learn/play/
‣ Fool around with Mr. Terrific and his friends
‣ Includes jsFiddle examples
# 48

49. Real Websites
See TerrificJS in action on some big company websites
# 49

50. Look into a terrific
future

51. Terrific is OpenSource
TerrificJS
‣ 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 features
Timeline
‣ End 2011: Launch of Terrific
# 51

52. More…

53. More…
Lets keep talking
‣ http://www.terrifically.org
‣ remo@terrifically.org
‣ https://github.com/brunschgi/terrificjs
‣ http://www.facebook.com/beTerrific
‣ http://twitter.com/#!/brunschgi
OOCSS
‣ http://oocss.org/
# 53