SlideShare a Scribd company logo

Terrific Frontends

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.

1 of 67
Download to read offline
Terrific Frontends
Terrific
Modularize your code, scale down your problems
Agenda

Concept

TerrificJS

Terrific Composer

Questions




Remo Brunschwiler   14. August 2012   #   3
Github
Take it. Make it better. Together.
Repositories

TerrificJS
   ‣ https://github.com/brunschgi/terrificjs

Terrific Composer (Symfony2 Edition)
   ‣ https://github.com/brunschgi/terrific-composer

Terrific Symfony2 Bundles
   ‣ https://github.com/brunschgi/TerrificCoreBundle
   ‣ https://github.com/brunschgi/TerrificComposerBundle




Remo Brunschwiler   14. August 2012                        #   5
Showcases
See Terrific in action

Recommended

Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScriptAndrew Dupont
 
A New Baseline for Front-End Devs
A New Baseline for Front-End DevsA New Baseline for Front-End Devs
A New Baseline for Front-End DevsRebecca Murphey
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeRebecca Murphey
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ EtsyNishan Subedi
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery ApplicationsRebecca Murphey
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitRebecca Murphey
 

More Related Content

What's hot

Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryRebecca Murphey
 
Symfony 2.0
Symfony 2.0Symfony 2.0
Symfony 2.0GrUSP
 
Command-Oriented Architecture
Command-Oriented ArchitectureCommand-Oriented Architecture
Command-Oriented ArchitectureLuiz Messias
 
There's more than web
There's more than webThere's more than web
There's more than webMatt Evans
 
Doctrine with Symfony - SymfonyCon 2019
Doctrine with Symfony - SymfonyCon 2019Doctrine with Symfony - SymfonyCon 2019
Doctrine with Symfony - SymfonyCon 2019julien pauli
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!Wildan Maulana
 
Desarrollo de módulos en Drupal e integración con dispositivos móviles
Desarrollo de módulos en Drupal e integración con dispositivos móvilesDesarrollo de módulos en Drupal e integración con dispositivos móviles
Desarrollo de módulos en Drupal e integración con dispositivos móvilesLuis Curo Salvatierra
 
Clickable DIVs and other icebergs
Clickable DIVs and other icebergsClickable DIVs and other icebergs
Clickable DIVs and other icebergsBen Buchanan
 
Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Fwdays
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha ThemesSencha
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил АнохинFwdays
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 
Functional programming using underscorejs
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs偉格 高
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwrdeimos
 

What's hot (20)

Introduction to Domain-Driven Design
Introduction to Domain-Driven DesignIntroduction to Domain-Driven Design
Introduction to Domain-Driven Design
 
Functions
FunctionsFunctions
Functions
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQuery
 
Symfony 2.0
Symfony 2.0Symfony 2.0
Symfony 2.0
 
Command-Oriented Architecture
Command-Oriented ArchitectureCommand-Oriented Architecture
Command-Oriented Architecture
 
There's more than web
There's more than webThere's more than web
There's more than web
 
Doctrine with Symfony - SymfonyCon 2019
Doctrine with Symfony - SymfonyCon 2019Doctrine with Symfony - SymfonyCon 2019
Doctrine with Symfony - SymfonyCon 2019
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!
 
Desarrollo de módulos en Drupal e integración con dispositivos móviles
Desarrollo de módulos en Drupal e integración con dispositivos móvilesDesarrollo de módulos en Drupal e integración con dispositivos móviles
Desarrollo de módulos en Drupal e integración con dispositivos móviles
 
Clickable DIVs and other icebergs
Clickable DIVs and other icebergsClickable DIVs and other icebergs
Clickable DIVs and other icebergs
 
load errorcmd
 load errorcmd load errorcmd
load errorcmd
 
Implementing New Web
Implementing New WebImplementing New Web
Implementing New Web
 
Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
How Kris Writes Symfony Apps
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony Apps
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha Themes
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
Functional programming using underscorejs
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
 

Similar to Terrific Frontends

AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS InternalEyal Vardi
 
10 ways to make your code rock
10 ways to make your code rock10 ways to make your code rock
10 ways to make your code rockmartincronje
 
JavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and FutureJavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and FutureIgalia
 
Cleaning your architecture with android architecture components
Cleaning your architecture with android architecture componentsCleaning your architecture with android architecture components
Cleaning your architecture with android architecture componentsDebora Gomez Bertoli
 
Multilingualism makes better programmers
Multilingualism makes better programmersMultilingualism makes better programmers
Multilingualism makes better programmersAlexander Varwijk
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyDavid Padbury
 
Using Backbone.js with Drupal 7 and 8
Using Backbone.js with Drupal 7 and 8Using Backbone.js with Drupal 7 and 8
Using Backbone.js with Drupal 7 and 8Ovadiah Myrgorod
 
Debugging in drupal 8
Debugging in drupal 8Debugging in drupal 8
Debugging in drupal 8Allie Jones
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slideshelenmga
 
Docker and Your Path to a Better Staging Environment - webinar by Gil Tayar
Docker and Your Path to a Better Staging Environment - webinar by Gil TayarDocker and Your Path to a Better Staging Environment - webinar by Gil Tayar
Docker and Your Path to a Better Staging Environment - webinar by Gil TayarApplitools
 
This upload requires better support for ODP format
This upload requires better support for ODP formatThis upload requires better support for ODP format
This upload requires better support for ODP formatForest Mars
 
Web Components With Rails
Web Components With RailsWeb Components With Rails
Web Components With RailsBoris Nadion
 
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Techsylvania
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsMatteo Manchi
 

Similar to Terrific Frontends (20)

AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
IOC + Javascript
IOC + JavascriptIOC + Javascript
IOC + Javascript
 
Terrific Composer Workshop
Terrific Composer WorkshopTerrific Composer Workshop
Terrific Composer Workshop
 
10 ways to make your code rock
10 ways to make your code rock10 ways to make your code rock
10 ways to make your code rock
 
JavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and FutureJavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and Future
 
Cleaning your architecture with android architecture components
Cleaning your architecture with android architecture componentsCleaning your architecture with android architecture components
Cleaning your architecture with android architecture components
 
React js
React jsReact js
React js
 
Backbone js-slides
Backbone js-slidesBackbone js-slides
Backbone js-slides
 
Multilingualism makes better programmers
Multilingualism makes better programmersMultilingualism makes better programmers
Multilingualism makes better programmers
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Using Backbone.js with Drupal 7 and 8
Using Backbone.js with Drupal 7 and 8Using Backbone.js with Drupal 7 and 8
Using Backbone.js with Drupal 7 and 8
 
Debugging in drupal 8
Debugging in drupal 8Debugging in drupal 8
Debugging in drupal 8
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slides
 
Docker and Your Path to a Better Staging Environment - webinar by Gil Tayar
Docker and Your Path to a Better Staging Environment - webinar by Gil TayarDocker and Your Path to a Better Staging Environment - webinar by Gil Tayar
Docker and Your Path to a Better Staging Environment - webinar by Gil Tayar
 
Book
BookBook
Book
 
This upload requires better support for ODP format
This upload requires better support for ODP formatThis upload requires better support for ODP format
This upload requires better support for ODP format
 
Web Components With Rails
Web Components With RailsWeb Components With Rails
Web Components With Rails
 
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
 
React Native for multi-platform mobile applications
React Native for multi-platform mobile applicationsReact Native for multi-platform mobile applications
React Native for multi-platform mobile applications
 

Recently uploaded

"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Utilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding ApplicationsUtilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding ApplicationsIES VE
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfinfogdgmi
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 

Recently uploaded (20)

"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Utilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding ApplicationsUtilising Energy Modelling for LCSF and PSDS Funding Applications
Utilising Energy Modelling for LCSF and PSDS Funding Applications
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdf
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 

Terrific Frontends

  • 2. Terrific Modularize your code, scale down your problems
  • 4. Github Take it. Make it better. Together.
  • 5. Repositories TerrificJS ‣ https://github.com/brunschgi/terrificjs Terrific Composer (Symfony2 Edition) ‣ https://github.com/brunschgi/terrific-composer Terrific Symfony2 Bundles ‣ https://github.com/brunschgi/TerrificCoreBundle ‣ https://github.com/brunschgi/TerrificComposerBundle Remo Brunschwiler 14. August 2012 # 5
  • 7. Remo Brunschwiler 14. August 2012 # 7
  • 9. What’s a module? web application module (n) 1 : an independent unit of functionality that is part of the total structure of a web application http://www.slideshare.net/nzakas/scalable-javascript-application-architecture Remo Brunschwiler 14. August 2012 # 9
  • 10. Remo Brunschwiler 14. August 2012 # 10
  • 11. Remo Brunschwiler 14. August 2012 # 10
  • 12. Remo Brunschwiler 14. August 2012 # 11
  • 13. Remo Brunschwiler 14. August 2012 # 11
  • 14. Remo Brunschwiler 14. August 2012 # 12
  • 15. Remo Brunschwiler 14. August 2012 # 12
  • 16. Remo Brunschwiler 14. August 2012 # 13
  • 17. Remo Brunschwiler 14. August 2012 # 13
  • 18. What’s a terrific module made of? HTML CSS JavaScript Remo Brunschwiler 14. August 2012 # 14
  • 19. What’s a terrific module made of? HTML CSS JavaScript Remo Brunschwiler 14. August 2012 # 14
  • 20. TerrificJS See how HTML, CSS & JS works together
  • 21. 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
  • 22. Modules The real stars of Terrific. Almost all of your code will find its place in one of the modules. Remo Brunschwiler 14. August 2012 # 17
  • 23. Example Remo Brunschwiler 14. August 2012 # 18
  • 24. Example Remo Brunschwiler 14. August 2012 # 18
  • 25. HTML Simply 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
  • 26. CSS Prefix your module CSS rules – in OOCSS style – to prevent yourself from strange side-effects /* hero.css */ .mod-hero { ... } .mod-hero pre { ... } .mod-hero .bubble { ... } ... Remo Brunschwiler 14. August 2012 # 20
  • 27. 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
  • 28. on(callback) Here goes all of your jQuery code on: 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» hook Remo Brunschwiler 14. August 2012 # 22
  • 29. after() Trigger the default state of your modules after: 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 connectors Remo Brunschwiler 14. August 2012 # 23
  • 30. Skins Extends your modules on demand – so you can apply different behaviours on the same module. Remo Brunschwiler 14. August 2012 # 24
  • 31. Example Remo Brunschwiler 14. August 2012 # 25
  • 32. HTML Simply 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
  • 33. CSS Prefix 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 needed Remo Brunschwiler 14. August 2012 # 27
  • 34. TerrificJS TerrificJS 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
  • 35. Connectors Lets your modules stay in touch with each other while remaining loosely coupled. Remo Brunschwiler 14. August 2012 # 29
  • 36. Example Remo Brunschwiler 14. August 2012 # 30
  • 37. HTML Simply 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
  • 38. CSS Connectors have no associated styles Remo Brunschwiler 14. August 2012 # 32
  • 39. TerrificJS The 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
  • 40. fire() In your «talking» module on: 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
  • 41. 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
  • 42. What we learned so far… Remo Brunschwiler 14. August 2012 # 36
  • 43. What we learned so far… But how does the stuff get applied? Remo Brunschwiler 14. August 2012 # 36
  • 44. Architecture Remo Brunschwiler 14. August 2012 # 37
  • 45. Bootstrap Remo Brunschwiler 14. August 2012 # 38
  • 46. Bootstrap Kickstarts the engine of your Application Basic bootstrap (function($) { $(document).ready(function() { var $page = $('body'); var application = new Tc.Application($page); application.registerModules(); application.start(); }); })(Tc.$); here is where the magic happens Remo Brunschwiler 14. August 2012 # 39
  • 47. Application Remo Brunschwiler 14. August 2012 # 40
  • 48. 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
  • 49. start() Starts all registered Modules ‣ Now the turn is at the modules (hooks) Remo Brunschwiler 14. August 2012 # 42
  • 50. Sandbox Remo Brunschwiler 14. August 2012 # 43
  • 51. Sandbox Gives 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 instances Remo Brunschwiler 14. August 2012 # 44
  • 53. Terrific Composer Frontend Development Framework ‣ Designed for building frontends / applications based on the Terrific concept ‣ Integrates TerrificJS ‣ Based on Symfony2 ‣ … still very young Remo Brunschwiler 14. August 2012 # 46
  • 54. Terrific Composer Frontend 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
  • 55. 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
  • 56. Open The Open dialog provides you fast access to all of your Modules and Pages. Remo Brunschwiler 14. August 2012 # 48
  • 57. Inspect The inspect mode shows you which modules are in use on the current page. Remo Brunschwiler 14. August 2012 # 49
  • 58. … Let’s see it in action Remo Brunschwiler 14. August 2012 # 50
  • 59. Impact How Terrific influences your frontend development
  • 61. Modular Development & Testing Remo Brunschwiler 14. August 2012 # 53
  • 62. Reusability Remo Brunschwiler 14. August 2012 # 54
  • 63. Remo Brunschwiler 14. August 2012 # 55
  • 66. More… Lets keep talking ‣ http://terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi ‣ http://twitter.com/#!/brunschgi Remo Brunschwiler 14. August 2012 # 58

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n