Uploaded byNick Do
JavaScript-API-Markup: A modern Web architecture
The Jamstack Auckland #1 meetup discusses the evolution and benefits of the Jamstack architecture, highlighting its performance, security, and scalability compared to traditional server architectures. Attendees explored the integration of technologies such as static site generators, APIs, and serverless functions, as well as challenges like steep learning curves and plugin availability. The event encourages community engagement and knowledge sharing in the Jamstack ecosystem with future discussions and volunteer opportunities.
More Related Content
Similar to JavaScript-API-Markup: A modern Web architecture
JavaScript-API-Markup: A modern Web architecture
- 1. JAMStack Auckand #1 @JAMStackAKL Javascript-API-Markup: Amodern web architecture Nick Do @ Datum Consulting NZ John Pham @ Fisher & Paykel Healthcare Aaron Zhong @ Datacom datumhq.comnetlify.comgridakl.com
- 2. Agenda •A brief historyof the web •What is JAMstack? •Why JAMstack? •Discussion • The future of JAMstack Meetup • Volunteer
- 3. Early 1990s JAMstack Auckland#1 A brief history of the web SERVER https://blog.hubspot.com/marketing/look-back-20-years-website-design
- 4. Why is theretech boom? – Late 1990s JAMstack Auckland #1 A brief history of the web https://www.telegraph.co.uk/technology/internet/10663451/The-early-days-of-25-websites.html WEB SERVER APP SERVER DATA BASE
- 5. Late 1990s –2000s https://www.programmableweb.com/news/what-mean-stack-and-why-it-better-lamp/analysis/2015/12/22 JAMstack Auckland #1 A brief history of the web
- 6. Problems with LAMPstack WEB SERVER APP SERVER DATA BASE JAMstack Auckland #1 A brief history of the web • Scalability • Performance • Security • Managing load balancer • Managing cache • Managing CDN servers • Unable to scale SQL database • Breaking updates
- 7. FrontEnd JavaScript –Late 2000s JAMstack Auckland #1 A brief history of the web
- 8. Fullstack JavaScript –Early 2010s JAMstack Auckland #1 A brief history of the web https://hackernoon.com/mean-stack-development-for-developers-4d88c40c4103 But, has the architecture changed? Things has gotten easier for JS dev Has LAMP problems gone away? NO NO
- 9. The API economybecame MASSIVE • Customer services • Intercom • Zendesk • Olark • Comments and forum • Disqus • Payment • Paypal • Stripe • Email • SendGrid • Ecommerce • SnipCart • CommerceLayer • Identification • Auth0 • Facebook/Google • Communication • Twilio • Site search • Algolia • Google JAMstack Auckland #1 A brief history of the web Is there an ecosystem for Compute? SERVERLESS
- 10. Serverless – morethan just a service JAMstack Auckland #1 A brief history of the web LESS OPS, MORE VALUE
- 11. Static site generators– Mid 2010s JAMstack Auckland #1 A brief history of the web GatsbyHugoJekyll • Components development • Mark up templating • Plugin ecosystem • HTML/CSS/JS output
- 12. Lately we have… Staticsite generators + Templating + API economy + Serverless + Ever improving build tools ________________________________ = Concept of JAMStack JAMstack Auckland #1 A brief history of the web
- 13. What is theJAM Stack? JAMstack Auckland #1 JAMstack • JavaScript • JS frontend frameworks • Handle all logics https://jamstack.org/ • API • Server side processing • Data interaction • Markup • Prebuilt pages via static site generators
- 14. Load characteristics -SSR or CSR? JAMstack Auckland #1 JAMstack CSR Prerender Static SSR https://developers.google.com/web/updates/2019/02/rendering-on-the-web *Server to run *JS blocks render *Server to run
- 15. Workflow? JAMstack Auckland #1JAMstack • Git based • Automatic deployment • Netlify • Github Pages • Zeit • Custom workflow from AWS, Azure… • Option for Headless CMS • Separate content and development STRUCTURE LOCAL CONTENT GIT HEADLESS CMS BUILD CDN DEV PROD
- 16. JAM usecase https://www.slideshare.net/t.bak/jamstack JAMstack Auckland#1 Why JAMstack? *Powered by Jekyll
- 17. Why JAM? • Fastestpossible performance • More secure • In-expensive • Scalable (and cheap to scale) • Good SEO • Empowering for the people involved • Users • Developers • Content people • Stakeholders JAMstack Auckland #1 Why JAMstack?
- 18. Why not JAM? •Steep learning curve • There isn’t enough plugins for everything… • Maturity • Support ___________________________________ But, that’s why we have this Meetup! JAMstack Auckland #1 Why JAMstack?
- 19. Thank you! Nick Do@ Datum Consulting NZ John Pham @ Fisher & Paykel Healthcare Aaron Zhong @ Datacom datumhq.comnetlify.comgridakl.com JAMStack Auckand #1 @JAMStackAKL
- 20. JAM stack ideas •Introduction to specific Generator • Jekyll • Gatsby • Content management • Contentful • Netlify CMS • Headless Wordpress • CI/CD for JAMstack • Github • AWS Code Pipeline • AWS Amplify • Azure Stack • Serverless authentication • Frontend workflow for JAM • Design system • Component development • Performance issues • Code splitting • Cache configuration • Manifest/Offline support • SEO for JAM • Metadata • Microdata • Search • Static method • Algolia API • CSS-in-JS styling • Emotion • Styled components • Multi-lingual sites • A/B testing • GraphQL for JAM • Showcases • How to build this • Ecommerce • SaaS Suggestions?
- 21.
- 22. Next event: TBA NickDo @ Datum Consulting NZ John Pham @ Fisher & Paykel Healthcare Aaron Zhong @ Datacom datumhq.comnetlify.comgridakl.com JAMStack Auckand #1 @JAMStackAKL
Editor's Notes
- #3 Welcome and thank you everyone for coming and for your interest Few words about the audience: I have briefly met some of you and the topic at hand seems to be at a level of …. Familiarity to some …. Talk briefly about the agenda of the talk
- #4 Server just serve the page Web browser just render the HTML and CSS Not much functionality
- #5 The comes multi tier web application – client server model With functionality Still the same web server that serves static content Backend processing Persistent layer, usually a SQL database People starts to realize there is so much that can be done on the web
- #6 There are a whole bunch of competing paradigm LAMP with everything opensource was the most popular paradigm out there
- #7 You start running into a lot of problems Performance issues Users especially on mobile are very impatient Amazon research shows that 1 more seconds of waiting, increase 10% that user will leave the site Unable to scale Security (PhP is notorious) Soon the complexity of your day to day developer is added with a lot of operation Managing load balancer Adding Cache layer In some cases CDN servers Database admin Security updates for your packages
- #8 JavaScript has gotten a lot of development Devices are getting more powerful Ease of writing complex frontend applicant reduces dramatically
- #9 By early 2000s the MEAN stack has gotten popularity because the previous frontend developer can now use Javascript for the backend too However, the 3 tier remains much the same The problems that LAMP has with scalability, security, and performance
- #10 Any of these services are hard to build, but they are effective undifferentiated if you spend the time and build it for your needs. These guys do all the hard plumbing. But, is there such an ecosystem for on demand, API like compute? Some one answer it for me? Someone answer…
- #18 Assest generated are stored as static files on CDN More secure because you are trusting functionality of the apps to different API providers who do security for their API full time In-expensive to distribute static files, no server running. You get A LOT out of free tiers