Tasty Recipes for Every Day (Neos)

Tasty Recipes for Every Day (Neos)

A collection of useful techniques and examples of how to solve common challenges with Neos presented at Inspiring Conference 2015

7c51f167a1eff172bcb5cdc13abf4c4a?s=128

Aske Ertmann

March 27, 2015
Tweet

Transcript

  1. None
  2. Agenda • Introduction • Essentials • Common tasks • Recipes

    • Presentation • Wrap-up
  3. @AskeErtmann • Member of Neos team for 4 years •

    Release manager of Neos 1.2 • Partner at MOC • Lead architect behind two bigger Neos projects
  4. venstre.dk (biggest political party in Denmark) • search • payment

    • news with tags & rss • integration with member system • social media feeds integration • 1500+ hours project
  5. folkekirken.dk (Church of Denmark) • search • news & rss

    • integration with video & psalm database • multi-site (12 sites currently) • 1000+ hours project
  6. ESSENTIALS

  7. CONFIGURATION SHARPENING YOUR TOOLS

  8. Challenge Lots of content makes saving slow. Reason Default file

    caches are inefficient with lots of entries with tags. Solution Use a proper caching technique for those large caches that use tags.
  9. How to Using Redis or Memcached for these three caches.

    Caches.yaml http://goo.gl/3yy2Pq
  10. Challenge Editors are logged out when flushing the cache. Reason

    Caches can contain things that would cause them to break after a cache flush in rare situations. Solution Usually this is not a problem and persisting sessions through cache flushing is in most cases safe to do.
  11. How to Configure the session caches to be stored in

    outside the “Data/Temporary“ folder. Caches.yaml http://goo.gl/0AOLML
  12. Challenge Processing images exhaust memory limits. Reason Resizing images in

    PHP (GD) requires a lot of memory. Solution To circumvent the default memory limits for PHP, dedicated image manipulation php extensions can be used.
  13. How to Configure the Image processing to use the “imagick”

    or “gmagick” driver. Settings.yaml
  14. VERSIONING KEEPING YOUR KITCHEN TIDY

  15. Use composer and versioning Easiest way is to have one

    repository containing a few files Use composer for managing packages http://goo.gl/W6MT1y
  16. MUCH BETTER

  17. AUTOMATIC DEPLOYMENT AUTOMATING REPETITIOUS TASKS

  18. Challenge Developing Neos is best done locally, how do you

    easily migrate to testing/production environment? Solution Using Surf you can set up automatic deployment for various environments. Example “./flow surf:deploy Production” http://goo.gl/yYEoiR
  19. DIFFERENT CONTEXTS VARIATIONS OF THE SAME

  20. Challenge Development, testing & production environments need small differences. E.g.

    Google Analytics account, payment gateway options, email settings, web service settings, etc. Solution Use different Flow sub contexts to differentiate between them. Example “Configuration/Production/Testing/Settings.yaml” “Configuration/Production/Live/Settings.yaml” “FLOW_CONTEXT = Production/Live”
  21. Essentials • Configuration • Redis/memcached for certain caches • Keep

    session during cache flushing • Use dedicated image processing library • Versioning • One repository • composer • Automatic deployment • Surf • Different context • Differentiate between development, testing & production
  22. COMMON TASKS

  23. Customizable 404 pages https://github.com/mocdk/MOC.NotFound (http://goo.gl/B4R68S) 1. composer require "moc/notfound" "1.0.*"

    2. Create page with url “/404/“ in the root of your site Doesn’t support content dimensions yet
  24. External target on link http://goo.gl/36VUEX Coming in Neos 2.0 Root.ts2:

  25. Multi-site installation Two techniques: a) Use same site package for

    multiple sites (easier to maintain) b) Use individual site packages for each site, but inherit configuration/resources (more customizable) Good to know: • Only use with same configuration across sites • No linking across sites (yet) • Basic access restrictions coming in 2.0 Follow progress at https://jira.typo3.org/browse/NEOS-177
  26. Improved sites management module coming in 2.0

  27. Obfuscate email addresses Turn into https://github.com/networkteam/Networkteam.Neos.MailObfuscator (http://goo.gl/49tMe6) composer require "networkteam/neos-mailobfuscator"

    "1.0.*"
  28. Access custom data in TypoScript Example: Flickr feed using a

    custom FlowQuery operation Flickr.ts2 Flickr.html
  29. FlickrOperation.php http://goo.gl/6XChzT

  30. SEO Meta tags NodeTypes.yaml Root.ts2 http://goo.gl/tbCkS3

  31. SEO Sitemap https://github.com/dfeyer/Flowpack.Plugin.Sitemap composer require “flowpack/plugin-sitemap" "dev-master" Routes.yaml (custom) http://goo.gl/or5s7o

  32. Good news Meta tags & sitemap coming as an official

    package for 2.0 (TYPO3.Neos.Seo)
  33. Optimizing the editor experience Adjust styles & JavaScript E.g. sliders,

    grids & body margins Root.ts2 http://goo.gl/HuWB9a
  34. None
  35. Backend customization using JavaScript events http://goo.gl/xphBOn

  36. Redirect old URLs when migrating from another site To ease

    the transition and make it possible for the editors to help with the migration. This can be done by allowing editors to add a the old URL for page to be redirected from. To do that you can use the MOC.Redirect Neos package which adds a field to every page for entering the old URL https://github.com/mocdk/MOC.Redirects composer require "moc/redirects" "1.0.*"
  37. RECIPES

  38. None
  39. NEWS WITH • SINGLE VIEW WITH INLINE EDITABLE HEADLINE &

    LEAD & IMAGE + CAPTION • LIST VIEW WITH AJAX LOADING • OVERVIEW • TAGGING • RSS USING DOCUMENT NODE TYPE AND ELASTICSEARCH
  40. None
  41. None
  42. Single view Configuration (document node type) • Configuration/NodeTypes.Article.yaml Template (page

    template) • Resources/Private/Templates/NodeTypes/Article.html View configuration (variables assignment) • Resources/Private/TypoScript/NodeTypes/Article.ts2 Wirering (render path) • Resources/Private/TypoScript/Root.ts2
  43. List Configuration (content node type) • Configuration/NodeTypes.List.yaml Templates – list

    & ajax list • Resources/Private/Templates/NodeTypes/List.html • Resources/Private/Templates/NodeTypes/ListAjax.html • Resources/Private/Templates/NodeTypes/Partials/ ListArticles.html View configuration – list & ajax list (variable querying & assignment) • Resources/Private/TypoScript/NodeTypes/List.ts2 • Resources/Private/TypoScript/NodeTypes/ListAjax.ts2 Wirering (render path) • Resources/Private/TypoScript/Root.ts2
  44. Overview Configuration (content node type) • Configuration/NodeTypes.Overview.yaml Template • Resources/Private/Templates/NodeTypes/Overview.html

    View configuration (variable querying & assignment) • Resources/Private/TypoScript/NodeTypes/Overview.ts2
  45. RSS • Configuration/Routes.yaml (endpoint) • Resources/Private/Templates/Rss.xml (template) • Resources/Private/TypoScript/Rss.ts2 (view

    configuration) • Resources/Private/TypoScript/Root.ts2 (wirering)
  46. Generic example code (not tested): http://goo.gl/eMx8xd Will become a package

    that works with and without Elasticsearch
  47. FORM WITH PAYMENT

  48. None
  49. None
  50. Using the TYPO3.Form framework to create a form and a

    custom package to handle payment gateway callback Plugin creates the form using a custom form factory Form displays a confirmation page and handles validation and if passed redirects to the payment gateway with a custom form listener that stores the form information The plugin handles the returning customer A custom controller is used to capture the payment gateways callback and stores the payment information and processes the order through a signal
  51. Donation plugin Configuration/NodeTypes.Donate.yaml • Plugin element configuration Resources/Private/TypoScript/NodeTypes/Donate.ts2 • Plugin

    configuration
  52. Form templates Resources/Private/Template/Donate/Index.html • Template that creates form view –

    including form and confirmation Resources/Private/Template/Donate/Finish.html • Template that shows success message Resources/Private/Template/Donate/PaymentCancelled.html • Template that shows cancelled message Resources/Private/Template/Donate/PaymentFailed.html • Template that shows failed message
  53. Form logic Classes/Form/Donate.php • Form factory – creates two step

    form with validation Classes/Form/Finishers/DonateFinisher.php • Form finisher – store donation information, redirects to payment gateway Classes/Listeners/DonationTransactionPostProcessor.php • Finalize payment – send emails
  54. Generic example code (not tested): http://goo.gl/fBsnjo

  55. PRESENTATION

  56. Challenge Delivering a fast website to your end users Reason

    Web performance is important to avoid losing interest of users Solution Most frontend performance optimizations can be done directly in the web server, however some of them requires being done in Neos
  57. How to Send expire headers, compress assets (gzip) Configure your

    web server according to standards Solid presets can be found for Apache, Nginx and others from the HTML5Boilerplate project https://github.com/h5bp/server-configs Alternatively use PageSpeed module from Google https://developers.google.com/speed/pagespeed/module
  58. How to Optimize images delivered by Neos/Flow https://github.com/mocdk/MOC.ImageOptimizer (http://goo.gl/68KciW) composer

    require "moc/imageoptimizer" “dev- master” (development version) Optimizes jpg, png, gif and svg images automatically. Supported platforms Linux, FreeBSD, OSX, SunOS & Windows + more with global binaries. Works for all Flow installations.
  59. How to Provide correctly scaled images for responsive web sites

    Example: http://goo.gl/aKmZOF
  60. How to Optimize JavaScript & CSS assets Use a preprocessor

    like Grunt/Gulp/Broccoli to build minified files Recommended modules: concat, uglify, autoprefixer, cssmin Example: http://goo.gl/Sf532e
  61. How to Serve quick responses for Neos pages Use a

    cache proxy like Varnish or Nginx static cache Example: Using Varnish requires sending cache-control headers with the HTTP responses To make that easier you can use the MOC.Varnish extension https://github.com/mocdk/MOC.Varnish (http://goo.gl/fGSAU9) However it’s still a rough proof-of-concept, but will be improved within the next few months to work perfectly together with Neos
  62. WRAP-UP GET YOUR ESSENTIALS IN ORDER RE-USE EXISTING SOLUTIONS DIG

    INTO THE RECIPES WORK ON A PROPER PRESENTATION @AskeErtmann
  63. REMEMBER DON’T BE AFRAID TO LOOK AT THE SOURCE CODE,

    IT’S OPEN SOURCE @AskeErtmann