Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Fast Web With Gatsby And WordPress

48 Aufrufe

Veröffentlicht am

Building static sites with React.js using Gatsby provides an easy to deploy setup, blazing fast speed, and smooth developer experience. JAMstack (JavaScript APIs Markup) is awesome and Maedah is going to show you why it has become such a popular tool by demonstrating how you can leverage Gatsby to supercharge your next WordPress site.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Fast Web With Gatsby And WordPress

  1. 1. by Maedah Batool FAST WEB WITH GATSBY & WORDPRESS
  2. 2. I am a WordPress Core Contributor, Open-source Journalist, Developer and a teacher. Maintainer of #GirlsWhoCode and #ReactJSLadies local meetup chapters. While working as a Content Strategist I’m a featured/published author at Scotch.io, TorqueMag, Envato Tuts+, SitePoint, Creative Market, etc. Also one of the Marketing Representatives at the official Make #WordPressMarketingTeam. I created a tech-training startup called FinkTanks through which I’ve taught 2,500+ girls how to code with WordPress. Recently, I started serving on the Outreach Initiative of the Nodejs Foundation Community Committee. You can find me on Twitter sharing dev tips @MaedahBatool → WORDPRESS MARKETING TEAM REP & CORE CONTRIBUTOR 👋 HELLO
 MAEDAH BATOOL
  3. 3. FOLLOW ME ON TWITTER @MaedahBatool " #GirlDevMinute Series 🧐 Development tips, tricks, etc. 👀 Find rants, jokes, and whatnotAnd on GitHub, MaedahBatool.com, LinkedIn …
  4. 4. 🤔 
 QUESTION Have you ever visited a website for reading a single post but ended up exploring a whole bunch of pages — because it's super fast?
 
 Coz. that's how I met Gatsby.js LET'S
 START WITH A QUESTION
  5. 5. React.js · Vue.js · Angular · Next.js · Gatsby.js CUTTING-EDGE FRONT-END ENGINEERING
  6. 6. Talk about web performance optimisation and improving page load time is number one on my TO DO list. Website speed is no more a luxury it's a necessity. GOALS & DETAILS OF A FAST WEBSITE TRAFFIC & ENGAGEMENT You’ll get more site visitors on a fast website that would translate to better ROI and engagement. PAGE RANKS A fast website earns a better browser rankings. Google ranks sites higher which load in less than one second. SALES Better SEO rankings and increased user engagements means better earnings. A fast site is making a visitor stay longer i.e., more chances of lead conversions. WHY
 FAST IS EVERYTHING?
  7. 7. Gatsby is a free and open-source React.js based framework that helps developers build blazing fast websites and apps. THE GATSBY.JS
  8. 8. Pulls data from multiple sources including headless CMSs like WordPress, Drupal, Contentful, etc. CMSs From your API, databases and from formats like YAML, JSON, CSV, formats etc. DATA Fetches data from Documentation, Posts, etc. SaaS services, your file system, and more directly into your pages usingGraphQL MARKDOWN GATSBY.JS CAN PULL DATA FROM ANYWHERE!
  9. 9. Multiple static web host deploying options. Netlify, GitHub Pages, AWS Amplify, Now.sh, and many more. DEPLOY Generates a highly performant and blazing fast front-end with HTML, CSS, React, etc. BUILD GATSBY.JS CAN BUILD COMPLETELY STATIC SITES
  10. 10. Modern Web Trends Enjoy the experience of cutting-edge modern web technologies at one place. React.js, modern JavaScript, CSS and more. Just name it and get your job done! Blazing Fast Speed Builds blazing fast sites. You don’t have to wait for page generation when requested. Instead, it pre-build pages and send them to a cloud of servers which are ever ready to be delivered Developer Experience An easy to deploy setup, and smooth developer experience. No more complicated deploys with databases, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js is internet scale. A FEW THINGS I REALLY LIKE ABOUT GATSBY Why Gatsby?
  11. 11. Progressive Web Apps Generates out-of-the-box static Progressive Web Apps (PWAs).Handles tasks like image optimisation, code bundling, minification, etc. These performance parameters calls for the PWA support. Plugins & Starters Gatsby has a huge directory for plugins and starter kits which help you start building sites instantly. You find a curated list of these beautifully stacked in their ecosystem. Support & Documentation Comprehensively built and maintained docs including separate sections for tutorials. The team is super awesome who keeps it updated all the time. A FEW THINGS I REALLY LIKE ABOUT GATSBY Why Gatsby?
  12. 12. FRONTEND WITH WORDPRESS IS HARD! Keeping yourself up to date with all the latest web technologies is hard. Learning about React, webpack, RollUp JS, GraphQL, advanced frontend testing, and then integrating all this inside WordPress — oh boy a big NO NO! KNOWING EVERYTHING Limited deploying options. Where continuous integration with for WordPress is unheard of. The process is not only time consuming but also costs a lot of money. DEPLOYMENT & CONTINUOUS INTEGRATION Frontend tech is always evolving. Staying up to date and making the infrastructure upgrades is super hard. I'd say it's a full-time job. UPDATES & CHANGES
  13. 13. FRONTEND → GATSBY.JS LET'S DO IT BACKEND → WORDPRESS
  14. 14. FOLLOW ME ON TWITTER @MaedahBatool " #GirlDevMinute Series 🧐 Development tips, tricks, etc. 👀 Find rants, jokes, and whatnotAnd on GitHub, MaedahBatool.com, LinkedIn … QUESTIONS

×