Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Top tips from what we've learned from our 10 years experience


Published on

Butterfly, a digital agency in Melbourne have been building Joomla websites for 10 years, and are one of the largest agencies in Australia who use Joomla. Development Team Leader Dylan McTaggart will be sharing some details about how Butterfly use Joomla to provide solutions to their clients.

He will be sharing interesting learnings and knowledge from the team's collective experience such as how they use a "skeleton" Joomla install full of extensions and libraries to get up and running quicker, how team collaboration on projects is increased using a front-end SASS framework in Joomla, and much more.

Published in: Software
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Top tips from what we've learned from our 10 years experience

  1. 1. About me RMIT Bachelor of Software Engineering. Development team leader. With Butterfly for 4.5 years.
  2. 2. 10 years experience Top tips
  3. 3. A Standard Install improves project start up time Tip 1
  4. 4. What is a “Standard Install”? “Skeleton” Joomla code. Based on latest stable package release. More than just a base template. Lightweight – only shared code allowed.
  5. 5. Butterfly Standard Install features HTML5 base template. Base styles and assets. Common 3rd party components. Baked-in WCAG standards.
  6. 6. Custom Butterfly additions Custom SASS framework. Custom extensions. Template overrides. Contact & search forms implemented.
  7. 7. Example from our Standard install
  8. 8. Why use a Standard Install? Centralised base code. Time saving – implement once, continuously reuse. Maintenance time is reduced.
  9. 9. Follow a good SASS structure and naming convention Tip 2
  10. 10. Why follow a structure? No structure = messy code. No need to reimplement the same code over and over. Developers all do things differently. Standardise development processes.
  11. 11. Good vs. bad It’s relative to the project. No structure – all in one big CSS file: Bad Changing structure from project to project: Bad Flexible & extensible structure: Good
  12. 12. We made our own framework Based on inuitcss SASS framework1. We don’t use bootstrap – wanted more control. Following BEM naming convention. Compiled with GULP. 1 for reference
  13. 13. css/ ├── settings ├── tools ├── generic ├── base ├── objects ├── blocks ├── pages └── trumps The structure Settings Variables initialisations (eg. colours, base font sizes and layout defaults). Tools Mixins and other functions (E.g. breakpoint calculation mixin, font CSS mixin).
  14. 14. css/ ├── settings ├── tools ├── generic ├── base ├── objects ├── blocks ├── pages └── trumps The structure Generic & Base High level styles. Site foundation styling and HTML cross-browsers resets. Objects Grouped styles for reusable elements. Blocks Styles for standard code blocks and extensions.
  15. 15. css/ ├── settings ├── tools ├── generic ├── base ├── objects ├── blocks ├── pages └── trumps The structure Pages Custom styles for particular pages (E.g. home page, search page, contact page). Trumps Utility and helper CSS styles.
  16. 16. How to choose what to use? Find a structure that: – Suits your team. – Suits your projects. Make sure you can extend when needed. If no good options – make your own!
  17. 17. Reusing utility classes? Make a library Tip 3
  18. 18. Why a library? Share across all extensions. Joomla framework lends itself to making libraries. Promotes code reusability. Code maintenance is easier.
  19. 19. Example: BFToolkit Recent project requirements: – Simple event management. – Custom searching functionality. The solution: – A new custom events component. – Our custom search component.
  20. 20. Example: BFToolkit cont. Custom date range field built for events. High potential for reuse. Components refactored to use library. Moved the field class to “BFToolkit” library.
  21. 21. Outcomes of using a library Independent extension usage. No bloat within either component, only use what is needed. Better user experience. Maintenance time is faster.
  22. 22. Examples from BFToolkit Custom fields Date range field, used within our custom components as a filter. Helper classes Extended Joomla Tags helper. Base API Client Generic REST API client. Wrapper for CURL methods, retrieving data and logging.
  23. 23. When to make a library? Using same code multiple times. Yes Potential for reuse. Yes Use code without needing entire component. Yes Extension context is required. No
  24. 24. Build extensions with future implementations in mind Tip 4
  25. 25. Forward thinking helps Follow a good solution design. Understanding requirements is key. I ask myself: – Can we reuse this in future? – How can I build this to be extensible/flexible in future? – What is not going to be reusable?
  26. 26. E.g. Butterfly API Component The problem Salesforce and Joomla integration. Map data from Salesforce to Joomla Articles. Preferably real time. +
  27. 27. E.g. Butterfly API Component The solution Custom REST API component. API endpoints configurable through Joomla backend. Configurable data parameters.
  28. 28. E.g. Butterfly API Component Example of configurable parameters
  29. 29. E.g. Butterfly API Component The future thinking Created base resource class. Developers can create subclasses as needed. Reusable for other 3rd party integrations.
  30. 30. Don’t keep reinventing the wheel Shared team mindset. Reusable solutions = time saver. Easier for team to learn. Perfect, rather than reinvent.
  31. 31. Good development process = better team collaboration & code Tip 5
  32. 32. My experience at Butterfly Intern 4.5 years ago. Not many development processes. Ad-hoc development cycles, every project fixed price (Waterfall).
  33. 33. My experience at Butterfly cont. Moved to Support/Small projects team. Increased client knowledge. Learnt to build small extensions efficiently. Understanding of issues that commonly arise.
  34. 34. My experience at Butterflycont. Moved to Development team when graduated. Learnt to build larger extensions. Worked on larger projects. Shared my learnings to my new team. Development processes created.
  35. 35. Our standards and processes
  36. 36. The outcomes of collaboration Good processes = greater team understandability. Best practice actively encouraged. Improvements shared more regularly. Reduction in development support queries.
  37. 37. Tips Summary Butterfly’s top tips Having a Standard Install improves project start up time Follow a good SASS structure and naming convention Reusing utility classes? Make a library Build extensions with future implementations in mind Good development processes = better team collaboration & code quality
  38. 38. Dylan McTaggart E: Ph: 03 9009 9601 ext. 666 Rachel Purdie E: Ph: 03 9009 9620 Contact details Check out our website! Presentation resources
  39. 39. Thank you!