TYPO3 CMS Website templates as an extension

Introduction into using TYPO3 CMS Extensions for Website Templates to provide a central location for code & configuration while integration with tools like Sass, Gulp, PostCSS, Imagemin & Webpack.

1. Websites  as  a  TYPO3  CMS  extension Mojo  Code   Morton  Jonuschat
2. Morton  Jonuschat Full  Stack  Developer twi2er.com/yabawock github.com/yabawock Haltern  am  See,  Germany Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 2
3. Agenda Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 3 Code Technical  stuff  and  best   prac?ces  from  daily  use. Integra+ons BaEeries  included… Basics Short  intro  to  TYPO3   Extension  structure
4. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 4 The  Basics
5. What  problem  do  we  want  to  solve?   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 5
6. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 6 hEp:/ /www.commitstrip.com/en/2015/04/13/coders-­‐are-­‐never-­‐sa?sfied/
7. Simple  Times fileadmin └── template ├── index.html ├── logo.gif ├── main.html └── site.css Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 7
8. Not  So  Simple  Times fileadmin └── template ├── index.html ├── index_2007.htm ├── logo.gif ├── logo_2007.gif ├── logo_small.gif ├── logo_wide.JPG ├── main_3cols.html ├── main.html ├── main_2cols.html ├── site.css └── site_2007.php Browser  dependent  CSS! Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 8
9. Messy  Times fileadmin └── template ├── main │ ├── index.html │ ├── logo.jpg │ ├── main.html │ ├── site.css │ └── site.js └── site2 ├── index.html ├── logo.jpg ├── main_wide.html ├── site.js └── site2.css It  wasn’t  me!  I  only  worked     on  the  main  template! Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 9
10. Structured  Chaos fileadmin └── templates ├── default │ ├── css │ ├── gfx │ ├── javascript │ ├── pages │ ├── plugins │ └── typoscript ├── site1 ├── ... └── site12 ├── css ├── gfx ├── javascript ├── pages ├── plugins └── typoscript Bigger  sites,  deeper  nes+ng,     more  problems! Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 10
11. Preparing  to  fail! h-ps:/ /flic.kr/p/aJmvxc  -­‐  NZ  Defence  Force/Flickr,  CC-­‐BY  2.0 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 11
12. More  Reasons Extension fileadmin/ Accessible  through  file  module¹ No  access  to  configura?on  for  users TYPO3  API  available File  based  configura?on Dependencies  (ext_emconf.php,  composer) Easy  deployment  &  distribu?on Version  control² Access  protec?on  for  config  files  (.htaccess)² Extensions  are  not  indexed  by  FAL ¹  Not  really  an  advantage   ²  Possible  but  difficult  for  fileadmin/ Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 12
13. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 13 Technical  Stuff
14. Basic  Structure site_package ├── Configuration │ ├── TypoScript │ └── .htaccess ├── Resources │ ├── Private │ │ ├── Layouts │ │ ├── Partials │ │ ├── Templates │ │ └── .htaccess │ └── Public │ ├── Images │ ├── JavaScripts │ └── StyleSheets ├── ext_emconf.php ├── ext_icon.png ├── ext_localconf.php └── ext_tables.php docs.typo3.org/typo3cms/CodingGuidelinesReference/FileSystemConven?ons/ExtensionDirectoryStructure/Index.html   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 14
15. Minimal  Boilerplate Define  extension  dependencies  (e.g.  css_styled_content) 1 Javascript 5 Stylesheets 4 Page  Template  (using  FLUIDTEMPLATE) 3 Basic  TypoScript  setup  (Template  &  PageTS) 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 15
16. Extension  Dependencies $EM_CONF[$_EXTKEY] = array( 'title' => 'Site Package Example', 'description' => '', 'category' => 'templates', 'version' => '1.0.0', 'state' => 'stable', 'clearcacheonload' => 1, 'author' => 'Morton Jonuschat', 'author_email' => 'm.jonuschat@mojocode.de', 'author_company' => 'MoJo Code', 'constraints' => array( 'depends' => array( 'typo3' => '6.2.0-6.2.99', 'css_styled_content' => '6.2.0-6.2.99' ), 'conflicts' => array(), 'suggests' => array() ) ); sitepackage_starter/ext_emconf.php   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 16
17. PageTSconfig TCEFORM { pages { layout.disabled = 1 alias.disabled = 1 } tt_content { header_layout { altLabels { 1 = H1 2 = H2 3 = H3 4 = H4 5 = H5 } removeItems = 0,6 } } } sitepackage_starter/Configura?on/PageTS/TCEFORM.txt   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 17
18. Register  Page  TSconfig if (!defined('TYPO3_MODE')) { die ('Access denied.'); } # \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
 # '<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY .
 # '/Configuration/PageTS/TCEFORM.txt">'
 # );
 sitepackage_starter/ext_localconf.php   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 18
19. Register  TypoScript  Template if (!defined('TYPO3_MODE')) { die ('Access denied.'); } \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile( $_EXTKEY, 'Configuration/TypoScript', 'Site Package' ); sitepackage_starter/ext_tables.php   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 19
20. TypoScript  Constants page.template { # cat=sitepackage_starter/file; type=string; label=Frontend templates templateRootPath = EXT:sitepackage_starter/Resources/Private/Templates/ # cat=sitepackage_starter/file; type=string; label=Frontend partials partialRootPath = EXT:sitepackage_starter/Resources/Private/Partials/ # cat=sitepackage_starter/file; type=string; label=Frontend layouts layoutRootPath = EXT:sitepackage_starter/Resources/Private/Layouts/ } sitepackage_starter/Configura?on/TypoScript/constants.txt   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 20
21. TypoScript  Setup # Require TypoScript from dependencies <INCLUDE_TYPOSCRIPT: source="FILE:EXT:css_styled_content/static/setup.txt"> # PAGE - Templates page {
 10 = FLUIDTEMPLATE
 10 {
 layoutRootPath = {$page.template.layoutRootPath}
 partialRootPath = {$page.template.partialRootPath}
 
 file.stdWrap.cObject = CASE
 file.stdWrap.cObject {
 key.data = levelfield:-1, backend_layout_next_level, slide
 key.override.field = backend_layout
 
 default = TEXT
 default.value = {$page.template.templateRootPath}/Pages/Index.html
 }
 }
 } sitepackage_starter/Configura?on/TypoScript/setup.txt   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 21
22. TypoScript  Setup # PAGE - Content page {
 10 {
 variables {
 contentNormal < styles.content.get
 contentLeft < styles.content.getLeft
 contentRight < styles.content.getRight
 }
 }
 } sitepackage_starter/Configura?on/TypoScript/setup.txt   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 22
23. Include  CSS # PAGE - CSS page {
 includeCSS {
 styles = EXT:sitepackage_starter/Resources/Public/Css/styles.css
 } } sitepackage_starter/Configura?on/TypoScript/setup.txt   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 23
24. Include  JavaScripts # PAGE - JavaScripts page {
 includeJSLibs {
 jQuery = //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
 jQuery { external = 1 excludeFromConcatenation = 1 disableCompression = 1 } } includeJSFooter {
 styles = EXT:sitepackage_starter/Resources/Public/JavaScript/site.js
 } } sitepackage_starter/Configura?on/TypoScript/setup.txt   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 24
25. Just  gePng  started! h-ps:/ /flic.kr/p/aikkbD  -­‐  LindsayEnsing/Flickr,  CC-­‐BY-­‐SA  2.0 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 25
26. Custom  ViewHelpers Need  a  dedicated  extension  for  autoloading  to  work 1 Conven?on  is  to  put  them  into  Classes/ViewHelpers 3 A  site  package  is  a  TYPO3  CMS  extension 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 26
27. Custom  ContentElements Try  to  re-­‐use  fields  provided  by  E_content  out  of  the  box 1 Op?onally  add  them  to  the  New  Content  Element  Wizard 4 Avoid  instan?a?ng  a  full  Extbase  Controller  for  simple  elements       3 Can  use  custom  database  tables  if  required 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 27
28. Backend  Layouts The  view  in  the  page  module  should  resemble  the  Frontend  structure 1 Can  be  used  to  automa?cally  switch  the  Frontend  template 3 Need  a  „Provider“  to  avoid  requiring  a  database  record 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 28
29. Grid  Elements Use  for  grid/columnar  output  when  Backend  Layouts  are  not  flexible  enough 1 Grid  elements  can  be  configured  purely  by  TypoScript 3 Avoid  the  technical  debt,  see  if  custom  content  elements  or  backend  layouts  suffice 2 Watch  out  for  your  colPos  arguments! 4 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 29
30. More  Components Hooks 1 Services 3 XClasses  for  other  Extensions 2 User  Func?ons 4 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 30
31. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 31 Modern  Workflow
32. Best  PracXce Manage  and  version  all  front-­‐end  dependencies 1 Op?mize  Images 5 Concatenate  and  minify  all  CSS/JS 4 Write  modular  Javascript 3 Pre-­‐  /  Postprocess  your  Stylesheets 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 32
33. Rocket  Science!? h-ps:/ /commons.wikimedia.org/wiki/File:Space_Shu-le_Discovery_launches_on_STS-­‐133.jpg  -­‐  By  NASA  [Public  domain],  via  Wikimedia  Commons Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 33
34. Integra5ng  the  tools  into  a  site  package… Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 34
35. The  SoluXon Bower Sass   +   PostCSS Webpack Imagemin Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 35
36. Bowerize  Assets Keeping  frameworks,  libraries  and  assets  current  has  never  been  easier 1 Copy  bowerized  assets  to  the  public  directory 4 Integrate  frameworks  and  libraries  into  the  processing  step 3 Don’t  use  bower  components  directly 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 36
37. Pre-­‐Process  Stylesheets Lots  of  good  op?ons  besides  Sass 1 Define  a  standard  and  s?ck  to  it 4 Choose  a  speedy  preprocessor 3 Choose  a  processor  that  supports  impor?ng  pure  CSS 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 37
38. Post-­‐Process  Stylesheets Write  CSS  without  vendor  prefixes  -­‐  use  Autoprefixer  to  add  them 1 Minify  CSS  for  produc?on 4 Include  source  maps  during  development 3 Inline  assets  using  base64  encoding 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 38
39. Compile  JavaScripts Modern  JavaScript  consists  of  lots  of  modules  (and  templates)    as  well  as  different  loaders 1 webpack  is  awesome  in  handling  this  mess   4 Some  dependencies  come  from  external  sources 3 Legacy  JavaScript  makes  a  lot  of  assump?ons  about  the  environment 2 …and  supports  babel  to  transpile  ES2015 5 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 39
40. Minify  Images Lots  of  file  formats  to  take  into  account 1 Performance  gains  can  be  HUGE! 4 Image  op?miza?on  is  SLOW! 3 Even  scalable  vector  graphics  need  op?miza?on 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 40
41. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 41 Running  Tasks
42. Development  Mode Should  perform  minimum  amount  of  work  when  an  asset  changes 1 …and  CONVENIENT 4 Needs  to  be  FAST… 3 Conven?on  over  Configura?on 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 42
43. BrowserSync Effortless  integra?on  using  integrated  proxy 1 Remote  inspector 4 Interac?on  sync 3 File  sync 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 43
44. $ gulp One  single  command Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 44
45. ProducXon  Mode Start  clean 1 Do  the  SLOW  stuff 4 Fail  hard 3 Regenerate  every  asset 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 45
46. $ gulp build:production One  more  command Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 46
47. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 47 Releasing  a  Site  Package
48. Release  Procedure Bump  version 1 Create  ZIP  archive  for  extension 3 Run  produc?on  build 2 Deploy 4 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 48
49. $ gulp release One  final  command  (deploy  not  included) Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 49
50. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 50 Wrapping  Up
51. GeAng  started  is  a  no-­‐brainer… Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 51
52. Even  the  minimal  setup  is  a  win! Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 52
53. Avoid  depending  on  database  records! Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 53
54. Really  awesome:  Fluid  ContentElements* Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 54
55. Download h2ps:/ /github.com/yabawock/sitepackage_starter Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 55
56. Resources File  system  conven?ons   hEp:/ /docs.typo3.org/typo3cms/CodingGuidelinesReference/FileSystemConven?ons/ 1 Bootstrap  Package   hEps:/ /github.com/benjaminkoE/bootstrap_package 4 The  Anatomy  of  Sitepackages   hEps:/ /speakerdeck.com/benjaminkoE/the-­‐anatomy-­‐of-­‐typo3-­‐sitepackages 3 Extension  Architecture   hEp:/ /docs.typo3.org/typo3cms/CoreApiReference/ExtensionArchitecture/ 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 56 BackendLayout  Provider   hEps:/ /github.com/georgringer/belayout_fileprovider 5
57. Thanks  For  Watching   Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 57
58. Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 58 Legal  Stuff
59. Licenses CC-­‐BY  2.0   hEps:/ /crea?vecommons.org/licenses/by/2.0/ 1 NASA  Copyright  Policy   hEp:/ /www.jsc.nasa.gov/policies.html#Guidelines 3 CC-­‐BY-­‐SA  2.0   hEps:/ /crea?vecommons.org/licenses/by-­‐sa/2.0/ 2 Websites  as  a  TYPO3  CMS  extension Morton  Jonuschat 59 Entypo+  Icon  Package  (hEp:/ /www.entypo.com/),  licensed  CC-­‐BY-­‐SA  4.0   hEps:/ /crea?vecommons.org/licenses/by-­‐sa/4.0/ 4 Lato  Font  Family:  SIL  Open  Font  License  1.1   Source  Code  Pro  Font  Family:  Open  Font  License  (OFL) 5