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

Transcript

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
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
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
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
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