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.

Final gatsby + wagtail - Inclusive product week

Dawn Wages for San Jose's Inclusive Product Week 2021

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

Final gatsby + wagtail - Inclusive product week

  1. 1. Ethical and Accessible Stack Wagtail + Gatsby + Ethical Source Licenses + + +
  2. 2. + Who Am I? + . . . . . . . . . . . . Django Engineer & Wagtail Core Team Member ● Software Engineer, React and Django Consultant at Rugby Street Designs ● Build enterprise tools for SMBs, NGOs, Black, Brown and Queer Enterprise ● Ethical Source Organizer Where you can find me: ● Twitter @DawnWagesSays ● DjangoCon(s) ● GlitterTech.dev ● http://DawnWages.info
  3. 3. + + . . . . . . . . . . . . Feature-packed and fast React-based open source prgresssive web app generator Rich, frontend and optimized websites on a cloud platform Tools we’ll be talking about today! Django-based Content Management System 10.6K Stars on Github and just released feature-rich version 2.13 www.DawnWages.info || @DawnWagesSays Can we have it all? Exploring if a GatsbyJS + WagtailCMS could be a solution for small and medium clients and personal project. Fully automate your development set up Always ready to code, turn almost any repo into a prebuilt collaborative VSCode like dev environment in your browser. Query language on a single data layer Not tied to any database or storage engine and can “easily” combine multiple data sources
  4. 4. + + . . . . . . . . . . . . A case study of sorts... React-based open source prgresssive web app generator Rich, frontend and optimized websites on a cloud platform Two powerful frameworks + two active communities Django-based Content Management System 10.6K Stars on Github and just released feature-rich version 2.13 www.DawnWages.info || @DawnWagesSays Content Management System A content management system provides a way for users to update information on their own. The developer equips the end user with “widget” like functionality and an admin login to update the website themselves. Progressive Web App Generator We’ve seen the rise of static-site generators in the past few years which take data content, provided in different formats, content and templates, processes them, and output a folder full of all the resultant pages and assets. Gatsby is different because it is written in React and outputs what could be an web app experience with stateful components.
  5. 5. + + . . . . . . . . . . . . Removes the presentation layer of what would be a full stack framework and adds its own presentation layer. What is headless? ANSWER: Flexibility When you abstract all of your decisions away to the top level of your application, you have a single point of decision but also a single point of failure. www.DawnWages.info || @DawnWagesSays Everything is a trade off. ● By separating your frontend and backend, you’re able to put data into one big “bucket” in order to be more flexible with the way that you render your application. ● Hard to do “stateful” frontend components with static templating ● Can bring in other services from the headless infrastructure beyond just web apps. Eg. SMS messages, email, rules engines, data analysis all done in your backend language of choice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frontend Backend Data Storage Development Environment
  6. 6. + + . . . . . . . . . . . . and what the heck is a static site generator (SSG)? Why headless? www.DawnWages.info || @DawnWagesSays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frontend Backend Data Storage Development Environment Icons made by Freepik from flaticon.com Data / Content Static Site Generator Website End Users Hosting BUILD TIME REQUEST TIME Wagtail uses the Model View Controller paradigm when it does not have a frontend. It has its own templating and view structure that leans into common web development patterns. When headless, we hand the “VC” to another framework, but still use django’s powerful model and migration, data management architecture that many node applications still wrestle with, we have out of the box! ...more data stores
  7. 7. + What sets Gatsby apart? + 01 Accessibility Gatsby is passionate about making sites that work for everyone and gives tools to help your site be WCAG compliant. 03 Gatsby Themes + Starters Starters are pre-configured sites with specific functionality for an expressed purpose to start your site with: eg. Blog, portfolio, ecommerce, and you can customize from there. Themes take the configuration from the site to an npm package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www.DawnWages.info || @DawnWagesSays 02 Plugin Library Thousands of plugins from analytics, ecommerce payment and auth, CSS and UI, to accessibility, etc. The gatsby community authors new themes all the time. 04 Community The users of Gatsby are passionate about the product. Gatsby authors excellent guides and documentation, but so does the community. The resources for questions, help and seeing examples of what’s possible are easy to find.
  8. 8. + What sets Wagtail apart? + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www.DawnWages.info || @DawnWagesSays 01 Tight release cycle Wagtail just release 2.13 - we use a time-based release schedule, with feature releases every three months. 03 Made with Wagtail A showcase of sites and apps made with wagtail, their authors and should the site have open code, it’s can be included 02 Plugin Library Like Gatsby and Django, Wagtail has lots of plugins that make the ecosystem even more feature rich. From Authentication, C calendar,, Localization, Workflow, Inventory, ecommerce, image editing, etc. 04 Community Wagtail shows up at conferences, has its own Wagtail Space, hosts tutorials an active Slack and Twitter community.
  9. 9. + + . . . . . . . . . . . . Pretty fast, and getting faster www.DawnWages.info || @DawnWagesSays So how fast is it to spin up a new site? ● Python 3.8 (3.9)** ● wagtail==2.10.1 (2.13)** ● wagtail-grapple==0.0.6.0 ● wagtail-media==0.6.0 ● graphene==2.1.8 ● graphql-core==2.2.1 ● graphene==2.1.8 ● Django==3.0.9 (3.2)** **Update to tutorial coming soon! http://bit.ly/wagtail-gatsby-latest-tutorial
  10. 10. + + . . . . . . . . . . . . Here’s where you could describe open GitPod Steps www.DawnWages.info || @DawnWagesSays 001 002 003 004 005 006 007 008 009 010 ./manage.py startapp blog and update blog models pip install graphene, wagtail-grapple, wagtailmedia configure graphene and grapple in the base.py and urls.py for graphql and graphiql view Add graphene_django, wagtail_graphql, wagtaimedia, grapple and blog to INSTALLED APPS in settings.py file ./manage.py migrate ./manage.py runserver 8080 add new blog posts https://8080[gitpodurl]/admin navigate to https://8080[gitpodurl]/api/graphiql to test graphql’s endpoints npm i -g gatsby-cli to install gatsby globally gatsby new site https://github.com/tm-kn/w atail-graphql-api-gatsby edit cd site and gatsby develop to run the site front end 011 012 013 edit .env to connect gatsby and wagtail WAGTAIL_GRAPHQL_ENDPOINT=http://local host:8080/graphql/ VISIT YOUR SITE RUNNING IN DEVELOPER MODE AT PORT 8000! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  11. 11. + Building projects + . . . . . . . . . . . . At The Root EST. June 2020 An Anti-Racist License for Open Source Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www.DawnWages.info || @DawnWagesSays Radical simply means 'grasping things at the root',” - Angela Davis
  12. 12. + + . . . . . . . . . . . . Anti-Racist Ethical Source License AtTheRoot.dev 001 What is an Ethical Source License? A new license that explicitly restricts use of open code on the basis of an ethics. At The Root www.DawnWages.info || @DawnWagesSays Icons made by Freepik from flaticon.com At The Root License Anti-Racist Check List At The Root Review Board
  13. 13. + + . . . . . . . . . . . . A movement that started in 2018, gaining traction 001 Empowers open source engineers Be confident that you are creating code that will build a world you want to live in. Ethical Source Movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Where next? www.DawnWages.info || @DawnWagesSays 002 Tech is not neutral, nor is it apolitical Regardless of how much we may want it to be, what we build and what we build it for is not neutral. 003 We’re building a movement Recently founded Organization for Ethical Source has full time member and partnerships with the Corporate Accountability Lab https://ethicalsource.dev/resources/
  14. 14. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + + Where you can find me: ● Twitter @DawnWagesSays ● DjangoCon(s) ● GlitterTech.dev ● http://DawnWages.info Thank you! . . . . . . . . . . . . dawn@glittertech.dev

×