November 2017 Summaries

Stencil, a tool for building modern Web Components, has introduced a unit testing framework to enhance its capabilities. This framework focuses on simplicity and minimalism, offering two main methods: render() for rendering components and flush() for rerendering elements after changes. To begin unit testing Stencil components, users can clone the Stencil Component Starter and use npm commands to install necessary packages and run tests, with Jest as the testing tool. The setup involves configuring the project's package.json file, including defining testing scripts and configuring Jest to handle TypeScript and JSX files. The provided test file in the Stencil Component Starter demonstrates testing a component's build and rendering, using the render() and flush() functions for asynchronous manipulation of HTML elements. The article outlines the testing API, setup requirements, and includes a basic example test, with a promise of future posts exploring test-driven development and component extension.

Ken Sodemann discusses the integration of web components built with Stencil into applications using Webpack, highlighting a specific Stencil Webpack Plugin that simplifies this process. The plugin is particularly beneficial for applications heavily reliant on Webpack, though it's not mandatory for using Stencil components in general. The implementation involves installing the plugin via npm or yarn, importing component collections into the project, and updating the webpack.config.js file to include these components in the build output. Sodemann provides guidance specifically for Angular applications, noting the need to use the CUSTOM_ELEMENTS_SCHEMA and detailing how to modify the webpack configuration. While the plugin is currently tested only with Angular, there are plans to extend its use to other frameworks like Vue or React.

Ionic DevApp is a developer-productivity app designed to facilitate immediate testing on iOS and Android devices without the need for installing native SDKs or managing device profiles. Initially created to streamline in-house testing of complex native changes, DevApp uses Ionic and Ionic Pro services to enable rapid iteration and deployment on mobile platforms. The app features a simple, split-pane UI built with Ionic Angular, and utilizes Cordova plugins to support native features. DevApp's key functionality includes automatic detection of ionic serve instances on a network using Service Discovery, implemented via UDP Broadcast, which is reliable across platforms. This approach has been open-sourced in a Node library called Ionic Discover. Ionic Pro offers real-time updates and error tracking, allowing developers to address post-production bugs swiftly. By using DevApp internally, Ionic has identified improvements for both the app and its associated tooling, demonstrating a commitment to enhancing the developer experience through iterative testing and feedback.