Stencil + Ionic + GraphQL: a great approach for modern web apps (and more!)

Ever tried web components? They are pretty cool, but sometimes you simply miss some features of frontend frameworks/libraries. And what about interacting with modern API like GraphQL? Is the fetch API our only option? How can we create an app on top of such components?
Fear no more! With the Stencil + Ionic + GraphQL setup, developing web apps with web components has never been so easy!

Transcript

1. SINTRA DIGITAL BUSINESS Stencil + Ionic + GraphQL A great approach for modern web apps (and more!) 1
2. SINTRA DIGITAL BUSINESS About me Leonardo Marcucci Software architect and R&D in Sintra, primarily on web technologies. IoT e home automation enthusiast, both at work and at home. Fan of movies/tv series and videogames/boardgames. 2
3. SINTRA DIGITAL BUSINESS A NEW WEB APP PROJECT? CHOOSE YOUR WEAPON! 3 Let’s try this! Great tools! But maybe you want to try something new, compatible with all standard web technologies… so...
4. SINTRA DIGITAL BUSINESS WHAT ARE WEB COMPONENTS? 4 Custom, reusable HTML components with logic CUSTOM HTML ELEMENTS Register your own HTML tags on the browser, then use them as any standard tag. Add inner logic to them with JS if needed. SHADOW DOM Use a separate DOM to manage your custom web component - with scoped CSS style! Regular DOM Component shadow DOM Shadow host Shadow root TEMPLATES / SLOTS Write reusable HTML template that you can use in your components. Define placeholders in your components that you can fill with HTML when you will use them.
5. SINTRA DIGITAL BUSINESS VANILLA WEB COMPONENTS: AN OVERVIEW 5 PROS Vanilla JS Encapsulate logic + UI Reusable across projects Compatible with FE framework of your choice (Angular, React, Vue…) Fully supported by modern browsers (check on https://www.webcomponents.org) CONS Learning curve Old school syntax Missing useful frameworks/libraries component features (e.g. data binding) Components only (no routing, state management…) Can we use any tool to overcome these difficulties?
6. SINTRA DIGITAL BUSINESS STENCIL: A WEB COMPONENTS BUILD TOOL 6 1 CODE Scaffold your project with Stencil CLI. Write your code in Typescript, HTML and CSS. 2 COMPILE Build your code with the Stencil compiler. 3 ENJOY Use the resulting native web components (on steroids) in your project!
7. SINTRA DIGITAL BUSINESS STENCIL FEATURES 7 MODERN CODING AND SYNTAX FAST RENDER Write your component in TSX. Use decorators to define properties, internal state, events and listeners. Re-rendering the web component DOM is very efficient by using virtual DOM under the hood. GLOBAL COMPATIBILITY PROGRESSIVE WEB APP Out of the box support for PWA and caching service worker. Automatically inject polyfills for browsers that need it (IE…). OPTIMIZED LOADING DATA BINDING Automatically trigger re-render if component state changed. Component code is loaded lazily in page only if needed, so bundle size and network usage are minimized.
8. SINTRA DIGITAL BUSINESS IONIC: A WEB COMPONENT FRAMEWORK 8 FEATURES Large UI toolkit Mobile-first approach Base theme inspired by Material Design Use as standalone tool with CLI or inside any web project Routing Common action components (FAB, pull-to-refresh…) Theme customization Great icons pack (Ionicons) included
9. SINTRA DIGITAL BUSINESS IONIC IS ADAPTIVE 9 USE EVERYWHERE Since Ionic is built on top of Stencil, the framework is composed of vanilla web components which can be used in every web app, regardless of which framework/libraries you are using. Customize Ionic appearance via its theming capabilities to suit your brand. FRAMEWORKS INTEGRATION Ionic comes in different flavors beside vanilla JS: Angular, React, Vue. This means that Ionic provides some tiny wrappers around the base vanilla web components to ease integration with your framework of choice. CROSS-PLATFORM Ionic enables web developers to build apps for all major app stores and the mobile web from a single codebase. With Adaptive Styling, Ionic apps have a native look and feel on every device.
10. SINTRA DIGITAL BUSINESS GRAPHQL AND ITS TOOLS 10 FEATURES Query language for API and a runtime for fulfilling such queries Based on a well-defined and typed schema Suitable for graph-like data Choose which data you need from API and query only that Fetch related entity data in one single query Batch operations TOOLS GraphiQL - Web app to explore a GraphQL API. https://github.com/graphql/graphiql SOFA - GraphQL to REST. https://sofa-api.com GraphQL Mesh - expose any datasource via GraphQL. https://graphql-mesh.com GraphQL Code Generator - generate code from GraphQL schema/queries. https://graphql-code-generator.com Apollo client - build and execute your GraphQL queries easily. https://github.com/apollographql/apollo-client
11. SINTRA DIGITAL BUSINESS STENCIL MEETS APOLLO 11 1 GQL FILES Get the API GQL schema. Write your queries in GQL files. 2 GENERATE CODE Use GraphQL Code Generator to generate types and Stencil components. 3 RELAX Components integrate with Apollo client and will fetch data using your queries! They will also automatically update after mutations!
12. SINTRA DIGITAL BUSINESS CAPACITOR: NOT ONLY WEB APPS 12 1 WEB CODEBASE Use an existing web project as your codebase. 2 PLATFORM-SPECIFIC Create platform-specific project for each platform you want to target with Capacitor. 3 BUILD AND DEPLOY Build the platform-specific projects with their native tools and deploy to stores!
13. SINTRA DIGITAL BUSINESS 13 DEMO TIME! Try yourself, download from GitHub - https://github.com/marcuson/stencil-ionic-graphql-demo
14. SINTRA DIGITAL BUSINESS USEFUL LINKS 14 Web Components • https://www.webcomponents.org/ • https://developer.mozilla.org/it/docs/Web/Web_Components Stencil • https://stenciljs.com • https://github.com/ardatan/stencil-apollo Ionic • https://ionicframework.com GraphQL • https://graphql.org/ • https://graphql-code-generator.com/ Capacitor • https://capacitorjs.com
15. SINTRA DIGITAL BUSINESS 15 Thanks! Keep in touch! Questions? https://www.linkedin.com/in/leonardomarcucci https://github.com/marcuson l.marcucci@sintraconsulting.eu marcuson.nn90@gmail.com