Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Aske Ertmann

March 27, 2015
Tweet

More Decks by Aske Ertmann

Other Decks in Technology

Transcript

  1. @AskeErtmann • Member of Neos team for 4 years •

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

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

    • integration with video & psalm database • multi-site (12 sites currently) • 1000+ hours project
  4. 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.
  5. 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.
  6. How to Configure the session caches to be stored in

    outside the “Data/Temporary“ folder. Caches.yaml http://goo.gl/0AOLML
  7. 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.
  8. Use composer and versioning Easiest way is to have one

    repository containing a few files Use composer for managing packages http://goo.gl/W6MT1y
  9. 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
  10. 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”
  11. 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
  12. 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
  13. 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
  14. Access custom data in TypoScript Example: Flickr feed using a

    custom FlowQuery operation Flickr.ts2 Flickr.html
  15. Good news Meta tags & sitemap coming as an official

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

    grids & body margins Root.ts2 http://goo.gl/HuWB9a
  17. 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.*"
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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.
  28. 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
  29. 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
  30. WRAP-UP GET YOUR ESSENTIALS IN ORDER RE-USE EXISTING SOLUTIONS DIG

    INTO THE RECIPES WORK ON A PROPER PRESENTATION @AskeErtmann