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.

Dot All 2019 Recap - Imarc


Published on

Imarc sent three engineers to the Craft CMS Dot All conference. They returned to tell us about Headless CMS, JAMstack, New Craft Products, and advancements in web development.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Dot All 2019 Recap - Imarc

  1. 1. THIS DOCUMENT IS CONFIDENTIAL ENGINEERING COOPERATIVE AUTHORS 2019 RECAP Shawna O’Neal Kerri Cranwell Bill Bushee Web Engineer Web Engineer Lead Web Engineer October 3, 2019 CraftCMS DotAll Conference
  3. 3. 01NEW STUFF
  4. 4. LAUNCHING 2020 Accessibility Improvements (Admin Panel) Multi-Author Editing Better Mobile Support (Admin Panel) New Field Layouts (Admin Panel / Content Editing) Custom Element Index Views (Admin Panel / Section Views) Conditional Fields ! Nestable Matrix Fields* !! * This is what we often refer to as the “matrix in a matrix” problem NEW STUFF Craft 4 * New Logo *
  5. 5. NOW AVAILABLE Basic Email, No Guaranteed Response Time Pro Email, Weekday 12 Hour Response Time Premium Priority Email, Weekday 2 Hour Response Time, Weekend 12 Hour Response Time NEW STUFF Developer Support Service Tiers
  6. 6. Craft Cloud LAUNCHING 2020 “Headless Craft as a Service” Hosting Platform for Headless Craft CMS No Templating, No Plugins, Just Data NEW STUFF “Headless” refers to a CMS that’s detached from the frontend and infrastructure. The CMS is treated as an API endpoint, requiring the data to be called and retrieved from the frontend system. More About This Next! Headless?
  7. 7. 02HEADLESS
  8. 8. Craft Currently Supports Headless: 3.2 Introduced Headless Content Previewing Craft is the first CMS to tackle previewing headless content natively 3.3 Headless Mode & GraphQL Integration Plugin: Element API Prior to the Headless Mode Release, developers used the Element API plugin to access Craft CMS data as an API endpoint. You can find this implementation on some of our Imarc projects! Plugin: CraftQL This plugin is no longer in use, as Craft 3.3 brought GraphQL into the native CMS Frameworks: Gatsby, Gridsome Gatsby is one of several Headless frameworks available. It’s widely popular in the craft community. Gridsome is similar but uses Vue instead of React. HEADLESS What Defines a Headless CMS? - API Driven Access Data as an API Endpoint - Data Driven Templating, Frontend, Design, Infrastructure etc. are no longer CMS managed - Frontend Agnostic The same data source (the CMS) is pulled into the code base for a website, android app, web software, and screenless frontends like Alexa. - CMS doesn’t render templates We’re used to the CMS rendering templates. In headless, the CMS only provides data points. Rendering is done by the system calling the data. IRL: Using Craft Headless with Gatsby The team at Edenspiekermann (Germany) presented on Headless Craft with Gatsby and have a very good write-up on their go-to implementation.
  9. 9. Good Use Cases - Cross Platform w/ Shared Data Source - Frontend Only Stacks i.e. JAMstack, or when you don’t have DevOps / Are using SaaS DevOps - When You Don’t Want The CMS to Render Frontend Templates - When Using a Static Site Generator - When Security Requirements Dictate Decoupling the CMS from the Public Facing Site HEADLESS When should you “Go Headless”? Going Headless is a decision made once you know what you’re building and what tools you have to build it with. It’s a choice you can make for your entire site, or for a select portion of it (a “Hybrid” solution). Bad Use Cases - CMS Controlled Layouts Headless is for content hierarchies, Layout is determined by the frontend - Because It’s New and Shiny ✨ You should choose Headless when it provides an advantage over your normal development setups. Headless is one of many ways to build a site. Choose what’s right for you + your projects!
  10. 10. 03FULLSTACK
  11. 11. Watch the Talk Yourself! Youtube: Non-Video Version: “WE’RE ALL FULLSTACK NOW” “Oops, I guess we’re all full-stack developers now” - Chris Coyier (CSS Tricks, Codepen) - Component-Based Development Backend developers rely on breaking code down into pieces, so components is a natural fit to their development style. Frontend has rapidly adopted this approach, especially with new frameworks that are components based. - DevOps: Now Optional Sites can be built without traditional server DevOps - JAM (Javascript, APIs, Markup) stacks instead focus on using outside services and a build pipeline. Most backend tasks - data retrieval, URL manipulation, etc. - become accessible within the Frontend code. - Overlapping Roles Backend and Frontend developers are learning Javascript frameworks. The line between the two roles is becoming blurred, and a shift to “Developers”, with highly diverse specialities, and “Devops” as designations are becoming more of the norm.
  12. 12. JAM v. LAMP Andrew Welch ( @nystudio107 ) gave a talk about the differences between JAM and LAMP stacks. If you don’t know Andrew - he’s the creator of some of our go-to Craft Plugins (Retour, Seomatic) Note: Imarc builds are mostly LAMP “FULLSTACK”: JAMstack v. LAMPstack JAM Stack: Javascript, APIs, Markup LAMP Stack: Linux, Apache, Markup, PHP
  13. 13. - Javascript’s Superpower: it can run both client and server side - JAM is great for “people who hate DevOps” and “people who love javascript” - The “APIs” part of JAM can be Craft CMS via the Element API plugin, or using GraphQL (Available in Craft 3.3) Pros: + Scales Well (CDN Focused) + Interactivity, Reactive (Modern JS Frameworks) + No DevOps Required Cons: - Thick Browsers (Slow / Accessibility Pain Point) - Painfully Slow Rebuild + Deployment Times - Toolset Isn’t as Mature “FULLSTACK”: JAMstack v. LAMPstack The Nutshell Which Stack is Better? Trick question. Both stacks are different, and can be better suited to different use cases, but one isn’t better than the other. JAM is Similar to LAMP (Really!) Nothing changed with what happens when a request is served, just where it happens. LAMP Build CSS/JS (Dev Server/Local) Serve DB Queries, Twig -> HTML, Dynamic Images (Prod Server) JAM Build CSS/JS, “Markup” -> HTML, Resize Images (Dev Server/Local) Serve (N/A)
  14. 14. What Should I Learn? LEARN EVERYTHING! But maybe learn these first… Javascript Regardless of what build types or development stacks we face, Javascript is going to play a big role. Vue.js and React.js are both major players on the field, with Vue being in use across most modern Imarc sites. All developers should be working on a basic understanding of modern Javascript frameworks. Developer Fundamentals Department Commander Jeff has been really honing in on this with our Engineers over the last year, and that’s because the fundamentals are what allow us to adapt to new technology and make informed decisions on a project-by-project basis. We are first and foremost problem solvers. From Dot All: “What makes you a good developer is that you’re a critical thinker, a problem solver - it’s not the details and the syntax… it’s all just code man” - Future of Web Development Panel “FULLSTACK”: What To Learn
  15. 15. 04PERFORMANCE
  16. 16. Performance with Headless Craft PROS: + Works Well with JAMstack + Works Well with Static Site Generation + Replaces DevOps + Optimizes Time to First Byte (TTFB) + Secures CMS by Disconnecting CMS From Web Applications + Frontend Freedom CONS: - Slower to See Edits - Build Steps Are Complex + Slow - Native Live Preview Only Available in Craft CMS - Dynamic Content Still Needs to Be Pulled From a Server (whether local or as a paid service) PERFORMANCE Hybrid Hybrid approaches can be performant too! Headless isn’t all-or-nothing. Consider detaching content from portions of a site that could benefit from doing so. Myths Headless is Faster Time to First Byte IS faster, but that doesn’t guarantee a fast loading web page (Headless + Serverless) No DevOps Means Less Time and Cost The time and resources saved by avoiding server setup and maintenance is replaced with pipeline setup and maintenance, in addition to fees for any data services. The costs are comparable. Headless is Complicated We probably use headless techniques more often than we realize. Headless isn’t particularly more complicated than a standard CMS approach but it is different.
  17. 17. Caching in Craft New Plugin! Blitz Caching Blitz was mentioned throughout the conference as a favorite Craft 3 plugin for tackling site caches. ($99/site) PERFORMANCE “Caching cannot be simply flipped on, like a switch.” - Prateek Rungta, Fortifying Craft for High Traffic - Determine a caching strategy around how you will Filter, Store, and Invalidate your caches. - Create a twig template (example) to cover template cache settings - {% cache %} breaks down as a caching strategy as sites approach 20+ pages - {% cacheflag %} is used for targeted caching on Elements, Sections, Globals, etc. - {% cacheflag … using cachekey … %} is used on dynamic content that differs based on request parameters (i.e. mobile/desktop version, user logged-in state) - Microcaching with NGINX utilizes FastCGI cache to tackle caching for high traffic sites. Resulting in 979 requests/s tackled by the same box that was handling 40 requests/s without microcaching. (Impressive)
  18. 18. 05AUTHOR XP
  19. 19. IMPROVING UX FOR CONTENT AUTHORS Community focus on Author Experience (AX) is what sets Craft apart from other Content Management Systems. Craft 4 developers want to take that to the next level. AUTHOR EXPERIENCE Craft 4
  20. 20. MORE FLEXIBLE Element Sources will be 100% user defined Element views will be customizable New view modes: Gallery, Calendar, and Board UI CHANGES Field instances are customizable Conditional fields Nestable matrix fields New UI elements; Grid, HR, & Fieldset AUTHOR EXPERIENCE COLLABORATION Support multi-author editing including alerts Support for merging changes Better access controls ACCESSIBILITY Full keyboard support High Contrast and Dark mode Better mobile editing including drag & drop Better responsive table implementation
  21. 21. © 2019 CONFIDENTIAL THANK YOU Any Questions?