More Related Content
Similar to Building the AO Tech Blog
Building the AO Tech Blog
- 2. Building the AOTech Blog Sarah Norris - Front End Developer
- 3. Overview ā Intro tothe blog ā Tech stack ā Why we chose this tech ā Honourable mentions
- 5.
- 6. Tech: React ā Front-endlibrary of choice ā Helps us maintain high quality code
- 7. Tech: TypeScript ā MakesJavaScript strictly-typed ā Allows for easier collaboration
- 8. Tech: Gatsby &GraphQL ā Framework based on React ā Super fast
- 9. Tech: Wordpress ā Superpopular blogging tool ā Allows us to use webhooks
- 10. Tech: Jest ā Preferredfront end tool for unit testing ā Helps maintain code quality
- 11. Tech: Terraform ā Keepsour infrastructure in code ā Allows for easier collaboration
- 12. Tech: Gitlab ā Repositorymanager ā CI/CD = Speed
- 13. Honourable Mentions ā Designbased on our own CSS framework ā Utility classes ā Consistent design structure ā Pre-commit hooks ā Automatic testing ā Commit-linter ā āConventional Commitā format ā <type>(optional scope): <description> ā feat(homepage): add video header ā Variety of technologies & languages ā HTML/JSX/JS/TS/SASS/YAML/TF/PHP
- 14.
Editor's Notes
- #5Ā Place for AOers to express themselves and show off things theyāve learnt Static site, just static HTML, CSS and JS files Completely decoupled from the database Few security risks Super fast
- #6Ā Reasons for choosing these fall into one of 3 categories: Collaboration Quality Speed Going to keep my explanations quite high level but if you do want me to go into more depth there should be time for questions at the end
- #7Ā React is often our frontend library of choice here at AO KEEPS CODE QUALITY HIGH BECAUSE: Allows for easy, clean component-based code Easily use JSX
- #8Ā Typescript is a superset of Javascript with optional types ALLOWS FOR EASIER CONTRIBUTION BECAUSE: Helps keep code structured and clean Increases code quality and readability Compiles to JS that runs on all browsers
- #9Ā Static site generator based on React SUPER FAST BECAUSE: Pulls data from external sources using GraphQL Generates static files Image compression Server-side rendering Easily deployable
- #10Ā Easy and familiar Ability to expand way beyond a blog WEBHOOKS: Also known as push notifications Allow us to create a link between our data source and our git repository Actions fired at certain points when Wordpress is updated
- #11Ā Designed to work with React Speed - Jest runs tests in parallel WHY JEST IS SO GOOD FOR QUALITY: Ability to watch for changes (TDD) Coverage reports
- #12Ā Tool that allows us to keep our infrastructure in code Portability COLLABORATION IS EASIER BECAUSE: Means our infrastructure is version-controlled No need to login to hosting provider
- #13Ā Allows us to use pipelines to build and deploy automatically (CI/CD) Pipelines can be triggered via commits being pushed to our repo or via webhooks from Wordpress HELPS KEEPS US SPEEDY: Setup configured by a file called yaml placed at the repositoryās root Configured using a .gitlab-ci.yml file
- #15Ā Any questions?