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
7. TerrificJS
Terrific JavaScript Framework
‣ JavaScript Library based on jQuery
‣ Very small footprint
‣ Modularizes your JavaScript Code
… most of the innovation goes here!
# 7
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
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
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
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
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
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
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