DEV Community: Teodor Dermendzhiev

CleanMyMac for developers

Teodor Dermendzhiev — Tue, 17 Oct 2023 08:43:37 +0000

Back in 2014, I got my first Mac. It was a beauty, but there was one hitch: it only had 125 GB of disk space. Over the years, I've cycled through a bunch of Macs, but guess what? Disk space problems have stuck around, thanks to my multiple projects. Sure, some workplaces handed me 1 TB Macs, but my personal ones? I've always gone for the 512 GB version, mainly because it's easier on the wallet.

I tried tools like CleanMyMacX, but they just didn't cut it. They couldn't spot the files that us developers know are a waste—things like node_modules, pesky caches, and old docker containers. That's why I decided to create something myself.

Meet Roomy, my macOS app that packs in all the developer-friendly file wisdom I've gathered over the years. You can test it out right here, totally free.

When you fire up Roomy, you'll see that, for now, it's all about cleaning up Xcode and JavaScript-related files. For JavaScript, you'll need to set your workspace path in the settings (the place where you keep your JavaScript projects). Check it out:

Once you've got your workspace set up, head over to Scan->Javascript. There, you can see how much space each of your projects' node_modules, build files, and caches is eating up.

Here is my Xcode summary:

I'm working hard on Roomy's core features, and your feedback is gold to me. Let me know if it's making your developer life easier and what else you'd like to see.

How to build your embedded NativeScript app within the Xcode project

Teodor Dermendzhiev — Thu, 21 Sep 2023 18:31:32 +0000

Recently, there's been growing interest in embedding NativeScript apps within native iOS applications. While this embedding feature in NativeScript is still relatively new and evolving, it offers promising capabilities. However, automating the build process in Xcode can present challenges due to discrepancies between the terminal and Xcode environments. In this post, we'll delve into these challenges and provide a solution for a unified build step.

The Challenge

Command Not Found: When invoking tools like ns from Xcode, you might encounter errors like "command not found". This is because Xcode doesn't share the same PATH environment variable as your terminal.
Environment Variables Mismatch: Xcode might not have access to all the environment variables set in your terminal profile, leading to unexpected behaviors.
UTF-8 Encoding Issues: Some tools, like CocoaPods, require the terminal to use UTF-8 encoding. If not set, this can lead to warnings or errors.

The Solution

To address these challenges, we'll craft a build phase script for Xcode that sets up the environment correctly and then runs the necessary commands.

1. The Build Phase Script

Here's the script:

#!/bin/zsh

# This script should be invoked before Compile sources build phase

# Ensure UTF-8 encoding
export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8

### User Configuration ###

# User's PATH
# Example: "/Users/yourusername/.nvm/versions/node/v14.0.0/bin:/usr/local/bin:/usr/bin:..."
# To get your current PATH, you can run "echo $PATH" in the terminal.
USER_PATH="<PATH-VAR>"

# Path to the project
# Example: "/Users/yourusername/workspace/myproject"
# This should be the absolute path to your project directory.
PROJECT_PATH="<YOUR-NS-PROJECT-ROOT-PATH>"

##########################

# Source the user's .zshrc
source ~/.zshrc

# Set PATH
if [[ -n "$USER_PATH" ]]; then
    export PATH="$USER_PATH"
else
    echo "Please set the USER_PATH in the script."
    exit 1
fi

# Run the ns command
if [[ -n "$PROJECT_PATH" && -d "$PROJECT_PATH" ]]; then
    ns prepare ios --path "$PROJECT_PATH"
else
    echo "Please set the PROJECT_PATH in the script."
    exit 1
fi

2. Understanding and Addressing the Issues

Command Not Found: This issue arises because Xcode's PATH doesn't include directories where some tools (like ns) reside. By explicitly setting the PATH in our script to match the terminal's PATH, we ensure all command-line tools are accessible.
Environment Variables Mismatch: By sourcing ~/.zshrc, we make sure that any environment variables set up in your terminal are also available in the Xcode script. This ensures a consistent environment between the two.
UTF-8 Encoding Issues: The locale settings at the start of the script ensure that the environment uses UTF-8 encoding, addressing potential encoding issues with tools like CocoaPods.

3. Integrating the Script into Xcode

Select your target in Xcode.
Navigate to the "Build Phases" tab.
Click the "+" and choose "New Run Script Phase".
Ensure this script phase is positioned before the "Compile Sources" phase.
Paste the content of your script.

Conclusion

With this setup, developers can enjoy a streamlined build process in Xcode that prepares both the NativeScript app and the iOS app embedding it. This approach ensures consistency between terminal and Xcode environments, leading to a smoother development experience.

For more tips on embedding NativeScript apps, follow me on Twitter @nsteodor.

Shrinking `node_modules`: Strategies to Reclaim Your Disk Space

Teodor Dermendzhiev — Thu, 17 Aug 2023 16:49:49 +0000

The node_modules directory is notorious for gobbling up disk space in JavaScript projects. If left unchecked, it can quickly balloon in size, consuming valuable storage. Here are seven strategies to keep it lean and free up disk space:

1. Embrace npm ci for Clean Installs:

When setting up a project from an existing package-lock.json, use npm ci. It removes the existing node_modules and installs dependencies afresh, ensuring no lingering, unnecessary packages occupy space.

2. Prune Redundant Packages:

Over time, you might accumulate packages that are no longer in use. After removing a package from package.json, run npm prune to ensure it and its orphaned dependencies are purged from node_modules.

3. Limit Global Installations:

While global installations can be convenient for CLI tools, be judicious. Only install packages globally that you use across projects to avoid multiple space-consuming installations.

4. Visualize and Audit with npm list:

Use npm list to get an overview of your dependencies. Spotting and removing unnecessary large packages can free up significant space.

5. Deduplicate with npm dedupe:

Redundant or duplicated packages can bloat node_modules. Run npm dedupe to consolidate and reduce the directory's size by eliminating these redundancies.

6. Exclude from Version Control:

Committing node_modules to version control not only bloats the repository but also your local clone. Always use a .gitignore file to keep node_modules out of version control.

7. Regularly Update and Clean Cache:

Keeping dependencies updated can sometimes reduce their size due to optimizations. Additionally, clear the npm cache periodically using npm cache clean --force to free up space taken by outdated or unused packages.

Conclusion:
The node_modules directory, while essential, doesn't have to be a disk space hog. By implementing these strategies, you can maintain a lean project environment, ensuring efficient use of storage and a smoother development experience.

7 Lesser-Known Features of `yarn.lock` and `package-lock.json` You Should Know

Teodor Dermendzhiev — Wed, 16 Aug 2023 09:23:06 +0000

1. Deterministic vs. Reproducible Builds:

Deterministic Builds: Both lock files ensure that given a codebase and a lock file, the same dependencies will be installed every time. This ensures consistency across installations.
Reproducible Builds: Yarn took it a step further by guaranteeing reproducible builds even before npm 5. This means that installations are identical across different machines, ensuring that the environment-specific bugs are minimized.

2. Dive Deep with Special Commands:

Yarn’s why Command: Ever puzzled why a certain package is in your project? Yarn offers the why command. By running yarn why <package-name>, you can trace the reasons a package was installed, whether it's a direct dependency, a sub-dependency, or due to a version conflict.

npm’s fund Command: Open-source projects thrive on community support. With npm fund, you can view funding URLs associated with your installed packages, allowing you to financially support projects you rely on.

3. Yarn’s Secret Weapon - The Resolutions Field:

Dependency conflicts can be a headache. Yarn offers a unique solution with its resolutions field in package.json. This allows developers to specify which version of a nested dependency should be used, overriding the version specified by the parent package. It's a powerful tool for ensuring consistency and resolving conflicts.

4. Merging Lock Files Isn’t a Nightmare:

Contrary to popular belief, lock files are designed to handle merges gracefully. If two developers update different sets of dependencies simultaneously, version control systems like Git can often merge the changes without conflicts. If conflicts do arise, the best practice is to accept both changes and then run a fresh install to regenerate the lock file.

5. The Power of Integrity Hashes:

Both lock files include an integrity field, which provides a hash of the package content, ensuring it hasn't been tampered with since its publication. What's fascinating is that this hash is algorithm-agnostic. So, if the npm registry starts supporting a new hashing algorithm in the future, your existing lock file remains compatible, ensuring smooth transitions.

6. Unearth the Hidden Cache:

Both npm and Yarn store downloaded packages in a local cache to speed up future installations. Before fetching from the remote registry, they first check this local cache. This not only speeds up installations but can also be a lifesaver when working offline. You can explore and manage this cache using npm cache ls for npm and yarn cache list for Yarn.

7. Recognize the Importance of Lock File Versions:

The lockfileVersion field in package-lock.json indicates the lock file's format version. For instance, lockfileVersion: 2 was introduced with npm v7 and brought enhanced features like workspaces support and improved peer dependencies handling. Recognizing this version can help diagnose issues related to incompatible npm versions or provide insights into available features.

While yarn.lock and package-lock.json might seem like simple manifest files at first glance, they're packed with features and nuances that can significantly streamline and improve your development workflow. By understanding and leveraging these lesser-known aspects, developers can navigate the world of dependency management with greater confidence and efficiency.

Why Your Mac is Slow: Diagnosing Disk Space Issues

Teodor Dermendzhiev — Mon, 14 Aug 2023 12:45:49 +0000

The spinning rainbow wheel. Every Mac user's dreaded nemesis. As developers, we often push our machines to the limit, running multiple IDEs, spinning up local servers, and juggling between browsers with dozens of tabs. But when our trusty Mac starts to lag, it's not just an inconvenience—it's a productivity killer. And while there could be a myriad of reasons for the slowdown, one of the most overlooked culprits is disk space (or the lack thereof).

But why does a lack of disk space cause such a significant slowdown? And more importantly, how can we diagnose what's eating up our precious gigabytes?

Understanding Disk Space and Performance

Disk space isn't just a place to store your files; it's a crucial component of your Mac's performance. When you're running low on space, your system has to work harder, often leading to noticeable slowdowns. But before we dive into the nitty-gritty, let's get a foundational understanding of how disk space impacts performance.

SSDs vs. HDDs: Modern Macs come equipped with Solid State Drives (SSDs), which are faster and more reliable than the older Hard Disk Drives (HDDs). However, SSDs have a catch: as they fill up, their performance can degrade. While HDDs suffer from fragmentation issues when they're near capacity, SSDs struggle with longer write times. So, if you're pushing your SSD to its limits, you're likely compromising its speed.

Swap Space and Virtual Memory: macOS, like other operating systems, uses a concept called "swap space." When your RAM is full, macOS will start "swapping" data between the RAM and the disk. This virtual memory allows your Mac to handle more tasks than the RAM could alone. But here's the kicker: if your disk is nearly full, this swapping process becomes sluggish, leading to those dreaded slowdowns.

Common Disk Space Culprits for Developers

As developers, we have a unique relationship with our machines. We demand performance, but we also consume a lot of space with our tools and projects. Let's explore some of the most common space-hogging culprits:

Development Environments: Virtual machines, Docker containers, and local databases can take up a significant chunk of space. For instance, a single Docker image might be lightweight, but if you have multiple containers and images, it adds up quickly.

Version Control: Git is fantastic, but it can also be a space hog. Cloned repositories, especially those with extensive histories or large files, can consume more space than you might expect.

Build Artifacts: After compiling your code, you're left with binaries, logs, and temporary files. While they might seem insignificant individually, they accumulate over time, especially if you're working on multiple projects.

Caches: IDEs, browsers, and other tools use caches to speed up operations. But these caches, if not managed, can grow and consume a surprising amount of disk space.

Large Datasets: Whether you're working with machine learning models or testing large-scale applications, datasets can be massive. And while they're essential for your work, they're also prime candidates for space consumption.

macOS-Specific Tools and Methods to Diagnose Space Consumption

Knowledge is power. Before we can reclaim our disk space, we need to know what's occupying it. Thankfully, macOS offers a plethora of tools, both built-in and third-party, to help us diagnose our storage woes.

Built-in Tools:

About This Mac: Navigate to the Apple menu > About This Mac > Storage. Here, you'll get a bird's-eye view of your storage distribution. It categorizes space usage into apps, photos, audio, movies, and backups, giving you a quick idea of where to start cleaning.
Disk Utility: Found in the Utilities folder, Disk Utility isn't just for repairing disks. The 'Info' button provides details about the selected drive, including capacity, used space, and free space.

Third-Party Tools:

DaisyDisk: With its intuitive and visually appealing interface, DaisyDisk provides a graphical representation of your storage, allowing you to quickly identify and delete large files and folders.
OmniDiskSweeper: This tool offers a more detailed, list-based view of files and directories sorted by size. It's perfect for those who prefer granularity over graphical representations.
GrandPerspective: Another visual tool, GrandPerspective uses treemaps to display the file system's content, making it easier to spot large files or directories at a glance.
OnyX: OnyX is a multifunctional tool for maintaining and optimizing your Mac. It offers a deep dive into the macOS file system, allowing users to verify startup disks, rebuild databases, and clear out a variety of caches. For developers, its detailed logs and automation scripts can be a lifesaver. The tool provides a granular level of control, making it perfect for those who know their way around macOS and want a powerful tool to keep their system in top shape.

Terminal Commands:

For those who love the command line, macOS offers powerful utilities to dissect storage usage:

du: Short for "disk usage", this command provides a summary of directory space usage. For instance, du -sh * will show the size of each file and directory in the current directory.
df: This "disk free" command displays the amount of disk space used and available on your Mac's file systems.
ncdu: An NCurses-based disk usage viewer, ncdu offers a more interactive and user-friendly way to explore disk usage from the terminal.

Tips for Regular Maintenance

Now that we've equipped ourselves with the tools to diagnose, let's talk about prevention. Regular maintenance can keep disk space issues at bay, ensuring your Mac runs smoothly.

Scheduled Cleanups: Set calendar reminders or use automation tools like Automator or Hazel to perform routine cleanups.
External Storage: Consider offloading large datasets or infrequently accessed files to external drives or cloud storage solutions.
Regularly Update and Prune Development Tools: Outdated SDKs, libraries, or tools can accumulate over time. Periodically review and remove what's no longer needed.
Mind Your Clones: When working with Git, consider using shallow clones or sparse checkouts for large repositories. This ensures you only pull the data you need.

Actionable Steps to Reclaim Disk Space and Boost Performance

Now that we're armed with knowledge and tools, it's time to roll up our sleeves and get to work. Here's a step-by-step guide to decluttering your Mac and ensuring it runs at its optimal best.

1. Start with the Low-Hanging Fruit:

Empty the Trash: It sounds basic, but you'd be surprised how much space is occupied by files you've already decided to delete.
Clear Browser Caches: Web browsers store a lot of data. Periodically clearing their caches can free up a significant amount of space.
Delete Old Downloads: The Downloads folder is often a graveyard of old files. Sort by size and date, and purge what you don't need.

2. Dive Deeper with Diagnostic Tools:

Use tools like DaisyDisk or OmniDiskSweeper to identify large files or folders. Be cautious and ensure you're not deleting essential files.
For developers, pay special attention to old project folders, outdated virtual machines, or stale Docker images.

3. Manage Your Development Environment:

Optimize Docker: Regularly prune unused Docker objects using commands like docker system prune.
Clean Up IDEs: Integrated Development Environments can accumulate cache and log files. Tools like JetBrains' IDEs have built-in cache invalidation options.
Archive Old Projects: Instead of deleting, consider archiving old projects to external storage or cloud solutions.

4. Automate Regular Cleanups:

Use macOS's Automator to create custom workflows for routine cleanups.
Consider third-party apps like Hazel that can monitor folders and perform actions based on custom rules.

5. Consider Upgrades:

If you're consistently running out of space, it might be time to consider hardware solutions:

Upgrade Your Internal Storage: If your Mac model allows, consider upgrading to a larger SSD.
External SSDs: Modern external SSDs are fast and can be a seamless extension of your internal storage.

Conclusion

A cluttered disk isn't just about lost space; it's about lost productivity. By regularly diagnosing and addressing disk space issues, you ensure that your Mac remains a reliable partner in your coding endeavors. But our journey into optimizing our Macs doesn't end here. In upcoming articles, we'll delve deeper into specific cases we touched upon today, like managing Docker images, optimizing web projects, mastering CLI commands for disk management, and more. Remember, a clean Mac is a happy Mac, and a happy Mac makes for a happy developer. Stay tuned for more insights and actionable tips to keep your development environment in peak condition!

How to Implement a Cross-Platform Login Screen with Angular within a WKWebView

Teodor Dermendzhiev — Wed, 26 Jul 2023 13:23:31 +0000

TLDR;

You can develop cross-platform components for your mobile apps using webviews without necessarily having to rely on hybrid frameworks.

Introduction

In many cases, especially when you're building a native app, you might want to have a cross-platform authentication flow. This could be because you want to maintain the native performance and feel for the rest of your app, but need a quick and efficient way to handle authentication.

You could go for a full-fledged hybrid app framework like Ionic or React Native, but that might be overkill if you're only looking to make a few parts of your app cross-platform. Plus, transitioning to a hybrid app framework comes with its own set of challenges, like learning a new programming language or dealing with the nuances of a different development environment. Or you might just have a web developer to help you with few screens...

This is where webviews come in. By creating a login screen using a webview, you can write the code once with a framework you (or whoever is writing the component) are already familiar with (Angular, React, Vue or whatever) and use it across multiple platforms. It's a lightweight solution that doesn't require a full hybrid app framework, making it perfect for simpler features like a login screen.

And to make things even easier, we're going to use an open-source library I created called ChattyWebviews. It's designed to facilitate communication between webviews and native classes, making it a breeze to integrate webview-based features into your native apps. If you find the article useful, consider giving it a star, so I can continue working on it - https://github.com/ChattyWebviews/ChattyWebviews.

Creating the Webview Login Screen

For the purpose of this tutorial, we'll use Ionic to create our login screen. Ionic is a popular framework for building cross-platform applications using web technologies. It's a great choice for our login screen because it allows us to write our code with javascript and have the native iOS or Android look.

First, let's install Ionic if you haven't done so already:

npm install -g @ionic/cli

Next, create a new Ionic project:

ionic start LoginDemo blank --type=angular

Navigate to the new project directory:

cd LoginDemo

Now, let's create a simple login form. Open src/app/home/home.page.html and replace its content with the following:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input type="text" ngModel name="username" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" ngModel name="password" required></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">Login</ion-button>
  </form>
</ion-content>

In src/app/home/home.page.ts add the onSubmit() method:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  onSubmit() {
      //here we will send the message to the native class
  }

}

This creates a simple login form with fields for username and password. The (ngSubmit) directive is an Angular feature that allows us to run a function when the form is submitted.

In the next section, we'll look at how to handle the form submission and communicate with our native app using ChattyWebviews.

Handling Form Submission with ChattyWebviews

Now that we have our login form, we need to handle the form submission. When the user submits the form, we want to send the username and password to our native app. This is where ChattyWebviews comes in.

First, install ChattyWebviews in your Ionic project:

npm install @chatty-webviews/js

Then open the AppComponent and attach the messaging service:

import { Component } from '@angular/core';
import { attach } from '@chatty-webviews/js';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {

    constructor() {
        attach();  
    }
}

Next, open src/app/home/home.page.ts and replace its content with the following:

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { sendMessage } from '@chatty-webviews/js';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('loginForm') loginForm!: NgForm;

  constructor() {}

  onSubmit() {
    if (this.loginForm.valid) {
      const { username, password } = this.loginForm.value;
      sendMessage('login', { username, password });
    }
  }
}

In this code, we're importing sendMessage from @chatty-webviews/js. We're also defining an onSubmit method that gets called when the form is submitted. In this method, we're sending a message to our native app with the username and password.

Setting Up the Native App

We need to set up our native app to display the login screen and handle messages from the webview. We'll be using SwiftUI for this.

Before writing the code, we need to do few things. First, add the ChattyWebviews' SPM package by going to File->Add Packages and pasting the repository url:

https://github.com/ChattyWebviews/ChattyWebviews

You will also need to build the Ionic web app package by running ionic build. When the build is done, drag the www folder inside the Xcode project:

Note: It's important to select Create folder references. If you want the package to be automatically updated after every build, leave Copy items if needed unchecked.

Here's the code for our main view, ContentView:

struct ContentView: View {
    @State private var showingSheet = false

    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Button("Login") {
                        showingSheet.toggle()
                    }
                    .sheet(isPresented: $showingSheet) {
                        SheetView()
                    }
        }
        .padding()
    }

    init(showingSheet: Bool = false) {
        self.showingSheet = showingSheet
        self.setupModules()
    }

    func setupModules() {

        let module = CWModule(name: "www", location: .Resources)
        WebViewFactory.initModules(modules: [module])
    }
}

In this code, we're creating a SwiftUI view with a button that displays a login screen when clicked. The login screen is a SheetView, which we'll define next.

Creating the Webview Login Screen

Next, we'll create the SheetView that displays the login screen. This view is a UIViewControllerRepresentable, which means it's a wrapper for a UIKit view controller that can be used in SwiftUI.

Here's the code for SheetView:

struct SheetView: UIViewControllerRepresentable, CWMessageDelegate {
    typealias UIViewControllerType = CWViewController
    @Environment(\.dismiss) var dismiss

    func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
        print(message)
        dismiss()

    }

    func makeUIViewController(context: Context) -> ChattyWebviews.CWViewController {
        let module = WebViewFactory.getModules()[0]
        let scheduleVC = WebViewFactory.createWebview(from: module, path: nil)
        scheduleVC?.messageDelegate = self
        return scheduleVC!
    }
}

In this code, we're creating a CWViewController that displays the login screen. We're also setting up a message delegate to handle messages from the webview. When a message is received, we print it and dismiss the login screen.

Handling Messages in the Native App

Finally, we need to handle the messages that we receive from the webview. This involves setting up a CWMessageDelegate in our native app.

Here's the code for the message delegate:

extension SheetView: CWMessageDelegate {

    func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
        print(message)
        dismiss()

    }
}

In this code, we're defining a method that gets called when a message is received from the webview. We're printing the message and dismissing the login screen.

Fetching Login Credentials in Native Code

In our SheetView class, we have already set up a CWMessageDelegate to handle messages from the webview. When a message is received, the controller(_:didReceive:) method is called. This is where we can fetch the login credentials.

Here's how we can modify this method to fetch the login credentials:

func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
    if message.topic == "login" {
        let credentials = message.body as? [String: String]
        let username = credentials?["username"]
        let password = credentials?["password"]
        print("Username: \(username ?? ""), Password: \(password ?? "")")
    }
    dismiss()
}

In this code, we're checking if the message topic is "login". If it is, we're fetching the username and password from the message body and printing them, then dismissing the modal:

Handling Login in Native Code

Now that we have the login credentials, we can handle the login in our native code. This could involve validating the credentials, fetching user data from a server, etc.

Here's an example of how you might handle the login:

func handleLogin(username: String, password: String) {
    // Validate the credentials
    guard validateCredentials(username: username, password: password) else {
        print("Invalid credentials")
        return
    }

    // Fetch user data from server
    fetchUserData(username: username) { userData in
        // Handle user data
    }
}

In this code, we're validating the credentials and fetching user data from a server. The validateCredentials(username:password:) and fetchUserData(username:completion:) methods are not defined here, as their implementation would depend on your specific use case.

Conclusion

With this setup, you can create a simple login screen using a webview and handle the login in your native code. This approach is quick and easy, and it doesn't require a full hybrid app framework like Capacitor. It also allows you to reuse your web code across different platforms, which can save you a lot of time and effort.

Microfrontends in mobile apps

Teodor Dermendzhiev — Wed, 19 Jul 2023 11:40:09 +0000

Microfrontends: Breaking Down the Monolith

Microfrontends take the concept of microservices and apply it to the frontend. Instead of a monolithic frontend where all components are tightly coupled, microfrontends break the UI into smaller, independent pieces. Each microfrontend corresponds to a specific feature or business domain and can be developed, tested, and deployed independently.

This approach is particularly beneficial for small teams or startups. It allows for faster iterations on individual features, reduces the scope of each update, and leads to a more agile development process.

For instance, consider an e-commerce app. With a microfrontend approach, the product listing, shopping cart, and user profile could each be a separate microfrontend, developed and deployed independently. This reduces the risk of unexpected side effects and makes each deployment less risky.

Webviews: A Bridge Between Native and Web

Webviews are a powerful tool that can be used to implement a microfrontend architecture in mobile apps. They are essentially mini web browsers embedded within your app, capable of rendering HTML, CSS, and JavaScript. This means you can develop individual features of your app as mini web apps and then integrate them into your native app using webviews.

Let's go back to our e-commerce app example. Suppose you want to develop the product listing, shopping cart, and user profile features separately. Each of these features can be developed as a separate web app by a web developer. The web developer can use their favorite framework (Angular, React, Vue) to create the UI and logic for these features. Once developed, these web apps can be integrated into the native app using webviews.

This approach has several benefits:

Code Reusability: Since web technologies are platform-agnostic, the same code can be used for both iOS and Android apps. This can significantly reduce the development time and effort.
Faster Iterations: Web developers can quickly iterate on the web app features without needing to understand the intricacies of native app development. This can lead to faster feature development and bug fixes.
Resource Optimization: If you're a small team or a startup, you might not have the resources to hire separate iOS and Android developers. By using webviews, you can leverage your existing web development skills to create mobile apps.

Think of it like having multiple smaller Ionic apps within your native app. Ionic serves the UI in a webview, much like what I'm proposing here. The difference is that instead of having one large Ionic app, you have multiple smaller web apps, each serving a specific feature of your app.

Introducing ChattyWebviews

ChattyWebviews is a framework designed to streamline the communication between webviews and native classes in mobile apps.

Here's a simple example of how you can use ChattyWebviews to send a message from a webview to a native class:

// In your webview
subscribe('update-items', (msg: any) => {
    this.itemsList = msg.items;
})

sendMessage("get-items");

And here's how you can listen for this message in your native class:

// In your native class (iOS)
func controller(_ controller: CWViewController, didReceive message: ChattyWebviews.CWMessage) {

        if message.topic == "get-items" {
            let verbs = itemsDataStore.getItems()
            let result = ItemsResult(items:items)
            let message = CWMessage(topic: "update-items", body: result.toDictionary())
            try? controller.sendMessage(message)
        }

    }

ChattyWebviews also supports Over-The-Air (OTA) updates. This means you can update the content of your webviews remotely, without needing to push an update through the app store.

Using webviews to create microfrontends in our mobile apps can make our development process more efficient. It allows us to reuse code and iterate faster. ChattyWebviews, while still in its early stages and currently only supporting iOS (Android support is coming soon), can be a helpful tool in this approach.

I hope this post has piqued your interest. I'm looking forward to hearing your thoughts and feedback. Happy coding!

Over-the-air updates for WKWebView content

Teodor Dermendzhiev — Tue, 18 Jul 2023 12:03:44 +0000

ChattyWebviews is a simple tool based on Firebase to help you get more from your webviews

Webviews enable developers to reuse code across different platforms, leading to significant time and resource savings. Major companies like Netflix have successfully leveraged webviews in their apps, using web technologies to deliver consistent user experiences across iOS and Android.

Netflix, for instance, initially used webviews to rapidly experiment with and iterate on their user interface. As Jordanna Kwok, Senior Software Engineer at Netflix, explains in an interview with Hacking with Swift:
"Webviews allowed us to A/B test large changes and get almost immediate feedback."

This ability to move fast and adapt quickly is especially crucial for startups and new product development, where the landscape is constantly changing and speed to market can be a key differentiator.

One of the key advantages of webviews is the ability to update the JavaScript code remotely, allowing for real-time updates to the webview content. This is where Over-the-Air (OTA) updates come into play, enabling developers to push updates directly to the webview components of an app, bypassing the traditional app store approval process.

In this blog post, I'll introduce you to ChattyWebviews, a simple framework that bridges the gap between web and native environments. ChattyWebviews facilitates seamless communication between webviews and native classes, making it an good solution for developers aiming to maintain agility in their app updates and promote UI reusability across platforms.

ChattyWebviews is not an alternative to native development or any cross-platform framework. It can be used alsongside any of them.

I'll guide you through the process of implementing OTA updates for the webview components of a standard iOS app using ChattyWebviews. We'll create a simple app with a login screen living in a webview. This login screen will not only be reusable between iOS and Android but also updatable using ChattyWebviews' OTA update feature.

So, let's dive in and explore how you can enhance your cross-platform app development process with Chatty Webviews and OTA updates.

We'll be using a simple app called CWLoginDemo for this purpose. You can create this app from scratch, or you can clone the project directly from here.

The CWLoginDemo app consists of a home screen with a login button. When the login button is tapped, a modal screen is presented, displaying the login page. This login page is not a typical iOS view, but an Angular app running inside a webview.

The login page we're using is a modified version of a project by Jason Watmore. When the user enters their username and password into the fields on the login page, the native class will receive the message, process the login, and close the modal.
Let's get into the details.

Setting up the CWLoginDemo App

Start by creating a new iOS app project and name it CWLoginDemo. Alternatively, you can clone the project directly from here. The app should consist of a home screen with a login button.

import SwiftUI
import ChattyWebviews

struct ContentView: View {
    @State private var showingSheet = false


    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Button("Login") {
                        showingSheet.toggle()
                    }
                    .sheet(isPresented: $showingSheet) {
                        SheetView()
                    }
        }
        .padding()
    }

    init(showingSheet: Bool = false) {
        self.showingSheet = showingSheet
        self.setupXPModules()
    }

    //1
    func setupXPModules() {
        let module = CWModule(name: "demo", location: .Resources)
        WebViewFactory.initModules(modules: [module])
    }
}

struct SheetView: UIViewControllerRepresentable, CWMessageDelegate {

    typealias UIViewControllerType = CWViewController

    @Environment(\.dismiss) var dismiss

    //3
    func controller(_ controller: ChattyWebviews.CWViewController, didReceive message: ChattyWebviews.CWMessage) {
        print(message)
        dismiss()

    }

    //2
    func makeUIViewController(context: Context) -> ChattyWebviews.CWViewController {
        let module = WebViewFactory.getModules()[0]
        let scheduleVC = WebViewFactory.createWebview(from: module, path: nil)
        scheduleVC?.messageDelegate = self
        return scheduleVC! 
    }

    func updateUIViewController(_ uiViewController: ChattyWebviews.CWViewController, context: Context) {

    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

First we need to initialize the web module with the name of our angular project contents (inside it's dist folder).
The makeUIViewController method returns a UIViewController, so we create the container of our webview app using WebViewFactory.createWebview. Remember to be careful with force unwrapping.
Above we set the messageDelegate property to self so the SheetView struct receives messages from the login webview. Here we just print the message and dismiss it.

Of course, for this to work you will have to install ChattyWebviews SDK. For the sake of this tutorial I used SPM, but you can also use Cocoapods or copy-paste the source code.

Integrating the Webview Login Page

The login page is an Angular app that we'll run inside a webview. When the login button on the home screen is tapped, a modal screen with the webview login page should be presented.

First, install the chatty-webviews-js package:

npm install @chatty-webviews/js --save

When you have it installed, don't forget to call attach() method:

import { Component } from '@angular/core';
import { attach } from '@chatty-webviews/js';

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {

    constructor() {
        attach();  
    }
}

Then in login.component.ts I replaced the this.accountService.login call with sendMessage(). Here is the entire component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { sendMessage } from '@chatty-webviews/js';

import { AlertService } from '../_services';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
    form!: FormGroup;
    loading = false;
    submitted = false;

    constructor(
        private formBuilder: FormBuilder,
        private alertService: AlertService
    ) { }

    ngOnInit() {
        this.form = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

    onSubmit() {
        this.submitted = true;

        // reset alerts on submit
        this.alertService.clear();

        // stop here if form is invalid
        if (this.form.invalid) {
            return;
        }

        this.loading = true;
        sendMessage("login-successful", {username: "Teodor"});
    }

}

When the user enters their username and password into the fields on the login page, the native class will receive the message. This message should trigger the processing of the login and the closing of the modal.

Now build the project:

npm run build

When the build completes drag the project folder from inside the dist directory to your Xcode project. It's important to select "Create folder references". If you leave "Copy items if needed" unchecked you won't need to drag the package folder after every build, but it won't be in the Xcode project repository, so decide based on your project structure.

Now, if you run the app and tap on the Login button you should see this:

Setting Up Your Environment for Over-the-Air Updates

Before we dive into the process of implementing over-the-air updates, we need to set up our environment. This involves creating a Firebase project and deploying the backend function to Firebase. Here's how to do it:

Step 1: Create a Firebase Project

First, you'll need to create a Firebase project.

As part of this process, make sure to enable authentication with email/password, storage, and the Firestore database. Please note that you'll need to have billing enabled to deploy the functions.

Step 2: Clone the Backend Repository

Next, clone the backend repository from here. Once you've cloned the repository, run npm install to install the necessary dependencies.

Step 3: Install Firebase Tools

If you haven't installed Firebase tools yet, you can do so with the following command:

npm install -g firebase-tools

Then, log in to Firebase using the command:

firebase login

Step 4: Deploy Functions to Firebase

Now, it's time to deploy the functions to Firebase. You can do this with the following command:

firebase deploy - only functions - project <your-project-id>

You can find your project ID by running:

firebase projects:list

If you encounter an error that says "Error: There was an error deploying functions" it's likely related to your Node.js version. Ensure you're using Node.js 16 (or the same version as specified in the functions' package.json):

"engines": {
 "node": "16"
}

After you've deployed the function successfully, copy it's url from the function's dashboard:

With these steps, you've successfully set up your environment for over-the-air updates. In the next section, we'll dive into how to implement these updates in your iOS app.

Pushing the updates

Now that we have our environment set up, we can proceed to implement over-the-air updates. This process involves using the ChattyWebviews CLI and setting up some environment variables on your machine.

Step 1: Install ChattyWebviews CLI

The ChattyWebviews CLI is a command-line interface that simplifies the process of managing your ChattyWebviews projects. To install it, run the following command:

npm install -g @chatty-webviews/cli

Step 2: Set Up Environment Variables

Next, you need to set up some environment variables on your machine. These variables will store the configuration details of your Firebase project. Here's how to do it:

On a Unix-based system like Linux or macOS, you can set environment variables using the export command:

export FIREBASE_API_KEY="<your_api_key>"
export FIREBASE_AUTH_DOMAIN="<your_auth_domain>"
export FIREBASE_PROJECT_ID="<your_project_id>"
export FIREBASE_STORAGE_BUCKET="<your_storage_bucket>"
export FIREBASE_APP_ID="<your_app_id>"

On Windows, you can use the set command:

set FIREBASE_API_KEY="<your_api_key>"
set FIREBASE_AUTH_DOMAIN="<your_auth_domain>"
set FIREBASE_PROJECT_ID="<your_project_id>"
set FIREBASE_STORAGE_BUCKET="<your_storage_bucket>"
set FIREBASE_APP_ID="<your_app_id>"

These commands set the environment variables for the current session only. If you want to set them permanently, you'll need to add these lines to your shell's startup file (.bashrc, .bash_profile, or .zshrc for Unix-based systems, or Environment Variables on Windows).

Replace <your_api_key>, <your_auth_domain>, <your_project_id>, <your_storage_bucket>, and <your_app_id> with your actual Firebase project details. You can get them by creating a web project from the Firebase console:

With the ChattyWebviews CLI installed and your environment variables set, you're now ready to push over-the-air updates to your app. First, tell ChattyWebviews more about your project by calling this command:

chatty init

It will ask you for email, password and the path to your package directory - in our case I pasted the absolute path to dist/demo.

Now go to login.component.ts and update something in the UI - e.g. replace the login button title with capital letters.

<button [disabled]="loading" class="btn btn-primary">
   <span *ngIf="loading" class="spinner-border spinner-border-sm me-1"></span>
   LOGIN
</button>

Build the package:

npm run build

And push the update to Firebase:

chatty ci release --version 1.0.1

Before testing the update you need to add few things to the setupXPModules:

func setupXPModules() {
        ModuleSynchronizer.updateCheckUrl = "<your-checkForUpdate-url>"

        let module = CWModule(name: "demo", currentHash: "", location: .Resources)
        WebViewFactory.initModules(modules: [module])
        ModuleSynchronizer.shared.updateIfNeeded(module: module, email: "tester@test.com", appId: "cw-login-demo") { success in
            print("Module \(module.name) updated! Please restart the app.")
        }
    }

When you run the app the login screen will be updated.