BEDCON 2019: Building (not so) static websites with Gatsby.js

How do you easily build a website with different sources like Markdown, Google Sheets or a Headless CMS using the hottest frontend technologies (like React, Next.js, and GraphQL) of 2019? What do you use to build the presentation layer for your headless CMS? For sure you are not going to build everything from scratch! And also performance - you won't want to reinvent the wheel. There is one great answer to your problems: Gatsby.js.

Transcript

1. Building (not so) static websites with Gatsby.js Sebastian Waschnick nice to meet you ~ BEDCON2019 ~
2. SEBASTIAN WASCHNICK CTO @ AXEL SPRINGER IDEAS ENGINEERING
4. .Net/C# with WPF and Asp.net (2-3 years) Silverlight and Flash (<1 year) Java with JSF (>6 years) PHP with Magento/OXID with jQuery (<1 year) Spring MVC with Freemarker (3 years) AngularJS (1-2 years) React (ever since)
6. Europe‘s leading digital publisher appr. 17.000 employees worldwide over 250 brands in over 40 countries appr. 80% of the revenue is digital 49,4% of the revenue is from international business The soul and spirit of the company Axel Springer is journalism. The Axel Springer Family In a nutshell
7. organic 2007 2008 2010 2009 2011 2013 2012 2006 2014 2015 2016 2017 2018 A family of many strong brands by acquisiton Organic
10. PLEASE, PLEASE! BUILD ME SOME WEBSITE!
11. AND NOW CHANGE THIS AND THAT AND THAT!
20. 7. OKTOBER 2019 Static Site Generator CMS Website Builders DIY
22. https://github.com/as-ideas/oil-website
23. https://github.com/as-ideas/as-ideas-website
25. https://www.gatsbyjs.org/starters/?v=2
29. package.json
30. package.json
31. package.json
32. package.json
33. package.json
34. 7. OKTOBER 2019
36. src/pages/index.js
38. gatsby-config.js
39. gatsby-config.js
40. gatsby-config.js
41. gatsby-browser.js
42. gatsby-browser.js disableCorePrefetching onClientEntry onInitialClientRender onPostPrefetchPathname onPreRouteUpdate onPrefetchPathname onRouteUpdate onRouteUpdateDelayed onServiceWorkerActive onServiceWorkerInstalled onServiceWorkerRedundant onServiceWorkerUpdateFound onServiceWorkerUpdateReady registerServiceWorker replaceComponentRenderer replaceHydrateFunction shouldUpdateScroll wrapPageElement wrapRootElement
43. gatsby-node.js
44. gatsby-node.js
45. gatsby-node.js
46. gatsby-node.js
49. http://localhost:8000/___graphql
50. http://localhost:8000/___graphql
52. 7. OKTOBER 2019
53. 7. OKTOBER 2019 https://console.developers.google.com/
54. 7. OKTOBER 2019
55. 7. OKTOBER 2019
56. 7. OKTOBER 2019 Medium to big sites. Not huge sites. Sites that need performance, full control over the layout and have tons of content. Not your company website.
58. Surprisingly steep learning curve. Sometimes strange error messages. Not the best option for all websites. Performance issues with 100k+ sites. Only gives you 90% of the possible performance.
59. Brought to you by SEBASTIAN WASCHNICK an IDEAS ENGINEERING production WHO‘D YOU CALL? sebastian.waschnick@asideas.de +49 30 259172668 www.asideas.de
60. ➡ medium.com/axel-springer-tech