Skip to content

Latest commit

 

History

History
61 lines (53 loc) · 3.53 KB

2024-08-28.md

File metadata and controls

61 lines (53 loc) · 3.53 KB

San Diego JavaScript Community: Fundamental JS

https://www.meetup.com/sandiegojs/events/300425700/

On the 4th Wednesday of every month, FundamentalJS meets to learn about an element or building block of Javascript plus soft skills to help attendees get hired. Laptops are highly encouraged for the warmup code challenges.

We are open to everyone coming in, from beginners who are learning the language to established coders who want to brush up on a concept.

SCHEDULE 7:00 - Code Challenge / Burning Questions 7:30 - Tech skills talk: James Lawrence - "How to modify Shopify checkout functionality using JavaScript and WASM"

Notes

  • James Lawrence: has used PHP & JS for years
    • Will talk about modifying Shopify using JS & WASM
    • Spent most of his time on the backend, with orders & inventory
  • Shopify is hard to customize, the future of it is headless design
    • Their Admin panel is really strong (dealing with customers, orders, checkout, etc.)
    • All of the stuff in the middle (what the site looks like) will be modified
      • They've opened their system for headless design
      • Send information as JSON
      • Web developers will build out the frontend
        • Remix & React are part of the tools being used
        • Hydrogen is the main part (UI tools, etc)
    • Everything is pulled together via GraphQL queries to maintain information
    • Their checkout is very strong and customizable
    • Their REST API will still exist but will be replaced by GrphQL Admin API
    • Shopify Functions uses WASM/Web Assembly
  • As of August 13th, they shut down the old way of customizing frontends via Liquid
    • Liquid will be deprecated
    • Used to just have an HTML file and a script with JS in the footer
    • The script was a security risk b/c people could put anything in it
      • Could lead people down the wrong path, like having a label that charged for shipping but said "free shipping"
    • Futureproofing was an issue, it was open to vulnerabilities, Shopify's own updates could break people's code
    • Performance was hit by doing a lot at rendertime
  • Shopify Functions is the new system, vendors have 2 years to switch to it
    • Code executes on backend now, on Shopify's servers in their own platform
    • More secure, code doesn't have to execute somewhere else
    • No one programs in WASM, you can use whatever language you want
      • They made RUST available, and JS & TS, but any language can be used that takes in and returns JSON
      • WASM executes in its own sandbox
  • Can't transform old code into new system, have to start from scratch
    • There are migration guides, but it all has to be done over
  • WASM is a compiled target and is the tech that makes Python run on the web via PyScript
    • Figma uses WASM to offload complicated math calculations (along with JS, it makes Photoshop in the web possible)
  • Shopify uses Hydrogen, which is React-based and uses Remix, which is like React Router
  • Shopify is free to use as long as it's not a live store (for developers)
    • Create a Free Partner account with as many free stores as you want
    • Can build stores for clients and then you can pass the store off to them (a button click)
      • "Request access to store" option in "Add store" dropdown in "Stores"

What resources to use to learn Shopify

  • Shopify's documentation is really good
  • Also learn GraphQL, JS, React
    • Don't need to learn WASM, necessarily
    • Hydrogen is their frontend framework and is React-based