DEV Community: Sidharth Juyal

Getting started with LiteRT (Tensorflow Lite)

Sidharth Juyal — Mon, 04 Nov 2024 19:00:00 +0000

So Google recently renamed TensorflowLite to LiteRT. And yes that was a genius move indeed. Because now for the first time in my life I actually want to try TFLite … yea, I mean LiteRT.

In the real world you’d ideally think like a regular ML developer and start with discovering a dataset that then you’d use to train a model. And then as a next step you’d invent a problem that could be solved by your trained model.

But for this experiment we are going to keep things simple and build the hello world of Machine Learning universe, the Dogs vs Cat exercise.

Setup

So coincidentally enough I’ve found a trained model from a flutter project that can tell if a given photo is of a dog or a cat.

Nice! So then following the instructions at the official getting started docs we need to add tensorflowlite as a dependency to our project.

use_frameworks!
# pod 'TensorFlowLiteSwift'
pod 'TensorFlowLiteSwift', '~> 0.0.1-nightly', :subspecs => ['CoreML', 'Metal']

In case you’re wondering why are we using the nightly build and not the stable release. It’s because as of today the latest stable release of TensorFlowLiteC won’t work on iOS simulator but according to the last comment on the issue looks like TensorFlowLiteC is now also shipped as xcframework but only in the nightly releases.

And then while we wait for the pod install to finish we can shamelessly rip sample images of various dogs and cats from the Introduction to TensorFlow Lite udacity course as our test set.

And we are all set!

Building the app

For the UI we just need a simple image view, a label and a button. The button obviously would reveal the answer and then randomly load the next image.

Now for the interesting bit. First we need a PetClassifier that takes in an image and returns a text.

class PetClassifier {

  init?(named: String, labels: [String]) {
    // ...
  }


  func labelForImage(_ image: UIImage) -> String? {
    // ...
  }
}

And then in the UI layer we can use our PetClassifier to update the label when tapped on the ‘Evaluate’ button.

class ViewController: UIViewController {

  var classifier: PetClassifier?
  @IBOutlet var answerLabel: UILabel!

  override func viewDidLoad() {
    super.viewDidLoad()
    classifier = PetClassifier(named: "dogvscat", labels: ["Cat", "Dog"])
  }

  @IBAction func handleTap() {
    answerLabel.text = classifier?.labelForImage(selectedImage) ?? "Potato"
  }
}

Finally, loading the model is pretty easy. We just need to instantiate Interpreter with the path to our tflite model.

class PetClassifier {
  let interpreter: Interpreter
  let labels: [String]

  init?(named: String, labels: [String]) {
    guard let modelPath = Bundle.main.path(forResource: named, ofType: "tflite") else {
      return nil
    }

    do {
      var options = Interpreter.Options()
      options.threadCount = Self.threadCount
      interpreter = try Interpreter(modelPath: modelPath, options: options)
      self.labels = labels
    } catch {
      print(error)
      return nil
    }
  }

  // ...
}

Invoking the model

To get the answer from the model is a 4 step process:

Prepare input
Send input data
Read output data
Parse output

/*
 * 1. Prepare input
 */
// user provided image
let image: UIImage 
// image size used for training model
let inputWidth = 224
let inputHeight = 224

// convert image to pixel buffer for further manipulation
let pixelBuffer = ImageUtils.pixelBufferCreate(image: image)
// crop image to size used for training model
let scaledPixelBuffer = ImageUtils.pixelBufferCreateWith(
  pixelBuffer: pixelBuffer,
  resizedTo: CGSize(width: Self.inputWidth, height: Self.inputHeight)
)
// Remove the alpha component from the image buffer to get the RGB data.
let rgbData = ImageUtils.pixelBufferCreateRGBData(
    pixelBuffer: scaledPixelBuffer,
    byteCount: Self.inputWidth * Self.inputHeight * 3
)

/*
 * 2. Send input data 
 */
interpreter.allocateTensors()      
interpreter.copy(rgbData, toInputAt: 0)
interpreter.invoke()

/*
 * 3. Read output data
 */
let outputTensor = try interpreter.output(at: 0)
let results: [Float] = outputTensor.data.withUnsafeBytes {
  Array($0.bindMemory(to: Float.self))
}

/*
 * 4. Parse output
 */      
// Create a zipped array of tuples [(labelIndex: Int, confidence: Float)].
// Sort the zipped results by confidence value
let inferences = zip(labels.indices, results)
  .sorted { $0.1 > $1.1 }
  .map { (label: labels[$0.0], confidence: $0.1) }

let bestInference = inferences.first

And there you have it. That is how offload your brain to your computer.

The ImageUtils from this experiment are available here. But there are probably better libraries for these operations. For example, the CoreMLHelpers

References

How to make an accordion with React Native

Sidharth Juyal — Thu, 17 Oct 2024 19:30:00 +0000

In the journey of making complex animations with React Native, let’s make an accordion!

I don’t know what is the best term for this component. I call it accordion, others call it expandable list. In the first version of material design this component was called as “Expansion Panel”. In the latest version they simply don’t talk about it anymore. In Apple’s Human Interface Guidelines they named it as “Disclosure controls” and in SwiftUI for some reasons they called it DisclosureGroup. But the documentation writer described the component as:

A view that shows or hides another content view, based on the state of a disclosure control.

Yes that is exactly what I mean.

I’m going to use the assets from the frontendmentor challenge because it looks nice.

Setup

To begin, inspired by Android I dumped all the data under one true global variable called R

const R = {
  colors: {
    white: "hsl(0, 0%, 100%)",
    lightPink: "hsl(275, 100%, 97%)",
    grayishPurple: "hsl(292, 16%, 49%)",
    darkPurple: "hsl(292, 42%, 14%)",
  },
  images: {
    background: require("./assets/images/background-pattern.png"),
    iconStar: require("./assets/images/icon-star.png"),
    iconPlus: require("./assets/images/icon-plus.png"),
    iconMinus: require("./assets/images/icon-minus.png"),
  },
  fonts: {
    regular: {
      name: "WorkSans-Regular",
      weight: 400,
    },
    semibold: {
      name: "WorkSans-SemiBold",
      weight: 600,
    },
    bold: {
      name: "WorkSans-Bold",
      weight: 700,
    },
  },
  strings: {
    header: "FAQs",
    content: [
      {
        title: "What is Frontend Mentor, and how will it help me?",
        body: "Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building.",
      },
      {
        title: "Is Frontend Mentor free?",
        body: "Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels.",
      },
      {
        title: "Can I use Frontend Mentor projects in my portfolio?",
        body: "Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers!",
      },
      {
        title: "How can I get help if I'm stuck on a challenge?",
        body: "The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.",
      },
    ],
  },
};

Layout

The first step of making an accordion is to make a simple list with all elements all expanded out. Which in code looks something like:

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="light" />
      <Image style={styles.backgroundImage} source={R.images.background} />
      <View style={styles.scrollContainer}>
        <ScrollView
          style={styles.scrollView}
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.contentHeader}>
            <Image source={R.images.iconStar} />
            <Text style={styles.contentHeaderTitle}>{R.strings.header}</Text>
          </View>
          {R.strings.content.map(({ title, body }, index) => {
            return (
              <View
                key={title}
                style={[
                  styles.cell,
                  {
                    borderBottomWidth:
                      index === R.strings.content.length - 1 ? 0 : 1,
                  },
                ]}
              >
                <Pressable style={styles.cellHeader}>
                  <Text style={styles.cellTitle}>{title}</Text>
                  <Image style={styles.cellIcon} source={R.images.iconMinus} />
                </Pressable>
                <Text style={styles.cellBody}>{body}</Text>
              </View>
            );
          })}
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: R.colors.lightPink,
  },
  backgroundImage: {
    width: "100%",
    resizeMode: "cover",
  },
  scrollContainer: {
    position: "absolute",
    backgroundColor: R.colors.white,
    borderRadius: 16,
    width: Dimensions.get("window").width - 32,
    height: Dimensions.get("window").height - 150,
    top: 150,
    left: 16,
    right: 16,
    padding: 32,
  },
  scrollView: {
    backgroundColor: "transparent",
  },
  contentHeader: {
    flexDirection: "row",
    gap: 32,
    paddingVertical: 8,
  },
  contentHeaderTitle: {
    fontSize: 36,
    fontFamily: R.fonts.bold.name,
    fontWeight: R.fonts.bold.weight,
  },
  cell: {
    paddingVertical: 16,
    borderBottomColor: R.colors.lightPink,
  },
  cellHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  cellTitle: {
    fontSize: 20,
    fontFamily: R.fonts.semibold.name,
    fontWeight: R.fonts.semibold.weight,
    width: "90%",
  },
  cellBody: {
    fontSize: 16,
    fontFamily: R.fonts.regular.name,
    lineHeight: 22,
    color: R.colors.grayishPurple,
    paddingTop: 16,
  },
});

The interesting bits are with creating a z-stack layout, with an image view in the background and a scroll view in front.

The tricky thing with ScrollView is that it needs a fixed frame and flexible content size. And what this actually means in ReactNative is that the parent of ScrollView should have a fixed size and then the children can be whatever.

But the container view also needs a position: absolute so we can move it in front of the image. And this bit of css does exactly all of that:

  scrollContainer: {
    position: "absolute",
    width: Dimensions.get("window").width - 32,
    height: Dimensions.get("window").height - 150,
    top: 150,
    left: 16,
    right: 16,
    // ...
  }

If you’re coming from a UIKit background like me and if you squint your eyes a bit this math looks like what you need to do for CGRect.

And with our basic setup is done

State management

Next step in making an accordion is to handle the state. And by state I mean either the selected index or an array of indices.

In code this means to first introduce useState and then using the Pressable to update the state. And finally the UI to consume the state.

export default function App() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  // ...
    <Pressable
      style={styles.cellHeader}
      onPress={() => setSelectedIndex(index)}
    >
      <Text style={styles.cellTitle}>{title}</Text>
      <Image
        style={styles.cellIcon}
        source={
          selectedIndex === index
            ? R.images.iconMinus
            : R.images.iconPlus
        }
      />
    </Pressable>
    {selectedIndex === index && (
      <Text style={styles.cellBody}>{body}</Text>
    )}
  // ...
}

Animate changes

And the final step is to animate the changes. In ReactNative that means using Reanimated to animate the height.

function Cell({ text, isOpen }) {
  const cellContainerStyle = useAnimatedStyle(() => {
    const height = isOpen ? withTiming(100) : withTiming(0);
    return { height };
  });
  return (
    <Animated.View style={cellContainerStyle}>
      <Text style={styles.cellBody}>{text}</Text>
    </Animated.View>
  );
}

<Cell 
  text={body} 
  isOpen={index === selectedIndex} />

Now to calculate the actual expanded height, we need to first calculate the max height of the Cell by wrapping the text within a View with position: absolute and using the onLayout callback to record the evaluated height.

Then, we need to make sure the Animated.View has overflow: hidden to clip the content from being rendered outside of the box.

function Cell({ text, isOpen }) {
  const [maxHeight, setMaxHeight] = useState(0);
  const cellContainerStyle = useAnimatedStyle(() => {
    const height = isOpen ? withTiming(maxHeight) : withTiming(0);
    return { height };
  });
  return (
    <Animated.View style={[
      cellContainerStyle, 
      { overflow: "hidden" }
      ]}>
      <View
        style={
          { position: "absolute" }
        }
        onLayout={(e) => {
          if (maxHeight === 0) {
            setMaxHeight(e.nativeEvent.layout.height);
          }
        }}
      >
        <Text style={styles.cellBody}>{text}</Text>
      </View>
    </Animated.View>
  );
}

And this is how you build an accordion with ReactNative.

The code from this experiment is available on https://github.com/chunkyguy/frontendmentor

Reference

MoveMe - SwiftUI Edition

Sidharth Juyal — Thu, 12 Sep 2024 18:38:00 +0000

Taking about gestures and animation with SwiftUI is actually not as intuitive as it sounds. But how hard could it be?

Setup

So like always we need 3 squares nicely lined up in the center of the screen. I’m going to use ZStack because I want the squares to layout independently of each other. The only thing the parent container view needs to provide is the initial position.

struct SquareView: View {
  var position: CGPoint

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .frame(width: 100, height: 100)
      .position(position)
      .foregroundStyle(.blue)
  }
}

struct ContentView: View {
  var body: some View {
    ZStack {
      ForEach(0..<3) { idx in
        GeometryReader { geometry in
          SquareView(position: CGPoint(
            x: geometry.size.width * 0.5,
            y: geometry.size.height * (CGFloat(idx + 1) / 4.0)
          ))
        }
      }
    }
  }
}

Gestures

Next we need a tap gesture and when detected the selected square should become red. The obvious solution would be to use a TapGesture but the TapGesture only activates at touch end and what we need is a way to detect touch began. The actual solution I found is to use the DragGesture with minimumDistance set to 0.

struct SquareView: View {
  var position: CGPoint
  @State var isSelected = false

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .frame(width: 100, height: 100)
      .position(position)
      .foregroundStyle(isSelected ? .red : .blue)
      .gesture(
        DragGesture(minimumDistance: 0)
          .onChanged({ _ in isSelected = true })
          .onEnded({ _ in isSelected = false })
      )
  }
}

Next we need to square to scale up when selected. Again the obvious solution is to use the scaleEffect.

struct SquareView: View {
  var position: CGPoint
  @State var isSelected = false

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .frame(width: 100, height: 100)
      .position(position)
      .foregroundStyle(isSelected ? .red : .blue)
      .scaleEffect(isSelected ? 1.2 : 1)
      .gesture(
        DragGesture(minimumDistance: 0)
          .onChanged({ _ in isSelected = true })
          .onEnded({ _ in isSelected = false })
      )
  }
}

But this brings another problem. Notice how the squares are not centered when scaling up.

This is because the view tree in SwiftUI is inverted because each modifier creates a new View and wraps the invoking object as its child. So these two are equivalent:

Box()
 .firstModifier()
 .secondModifier()


SecondModifierView(
  FirstModifierView(
    Box()
  )
)

So back in our solution above the scaleEffect is applied first and then the position. This make the center to become off centered. The solution is to apply the position modifier after the scaleEffect.

struct SquareView: View {
  var position: CGPoint
  @State var isSelected = false

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .frame(width: 100, height: 100)
      .scaleEffect(isSelected ? 1.2 : 1)
      .position(position)
      .foregroundStyle(isSelected ? .red : .blue)
      .gesture(
        DragGesture(minimumDistance: 0)
          .onChanged({ _ in isSelected = true })
          .onEnded({ _ in isSelected = false })
      )
  }
}

And finally we want the square to move around with the finger. This part is simple since we already have drag gesture, we just need to update the position of the square.

struct SquareView: View {
  @State var position: CGPoint
  @State var isSelected = false

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .frame(width: 100, height: 100)
      .scaleEffect(isSelected ? 1.2 : 1)
      .position(position)
      .foregroundStyle(isSelected ? .red : .blue)
      .gesture(
        DragGesture(minimumDistance: 0)
          .onChanged({ value in
            isSelected = true
            position = value.location
          })
          .onEnded({ _ in isSelected = false })
      )
  }
}

Animations

For the next part we would like the transitions to animate. For this we can either use the withAnimation block

struct SquareView: View {
  @State var position: CGPoint
  @State var isSelected = false

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .frame(width: 100, height: 100)
      .scaleEffect(isSelected ? 1.2 : 1)
      .position(position)
      .foregroundStyle(isSelected ? .red : .blue)
      .gesture(
        DragGesture(minimumDistance: 0)
          .onChanged({ value in
            withAnimation {
              isSelected = true
            }
            position = value.location
          })
          .onEnded({ _ in
            withAnimation {
              isSelected = false
            }
          })
      )
  }
}

But look our favorite bug is back again. Notice how the squares are off centered when selected.

But now we know why this bug exists. We need to guarantee that the position is applied after the scaling. But since we are using the withAnimation block it sets some flag for the next draw pass to be done with animation. And that means all the changes are animated. But what we want is to have only have the scaling change as animated and everything else non animated.

To achieve this we can use the animation modifier. It does the same thing as withAnimation block but we can control where in the View hierarchy we want the animation to happen.

struct SquareView: View {
  @State var position: CGPoint
  @State var isSelected = false

  var body: some View {
    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
      .scaleEffect(isSelected ? 1.2 : 1, anchor: .center)
      .animation(.easeOut, value: isSelected)
      .frame(width: 100, height: 100)
      .position(position)
      .foregroundStyle(isSelected ? .red : .blue)
      .gesture(
        DragGesture(minimumDistance: 0)
          .onChanged({ value in
            isSelected = true
            position = value.location
          })
          .onEnded({ _ in
            isSelected = false
          })
      )
  }
}

The solution is available on https://github.com/chunkyguy/MoveMe

References

Coordinating multiple gesture recognizers

Sidharth Juyal — Wed, 11 Sep 2024 19:53:00 +0000

So how does one actually work with multiple gesture recognizers on same view?

Let’s recreate the MoveMe sample with UIGestureRecognizer. The idea is to have both UILongPressGestureRecognizer and UIPanGestureRecognizer play nicely with each other. With UILongPressGestureRecognizer responsible for detecting selection and UIPanGestureRecognizer responsible for dragging the selected squares.

Setup

We have a SquareView that can react to changes such as selection and change in position. The main updates happen in layoutSubviews. setNeedsLayout reschedules a update at next draw cycle and layoutIfNeeded requests an update immediately.

struct SquareViewProps {
  var color = UIColor.blue
  var scale: CGFloat = 1.0
  var position: CGPoint
}

class SquareView: UIView {

  private var props: SquareViewProps {
    didSet { setNeedsLayout() }
  }

  override init(frame: CGRect) {
    props = SquareViewProps(position: CGPoint(x: frame.midX, y: frame.midY))
    super.init(frame: frame)
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    backgroundColor = props.color
    center = props.position
    transform = CGAffineTransform(scaleX: props.scale, y: props.scale)
  }

  private func resetProps(_ props: SquareViewProps) {
    self.props = props
    UIView.animate(withDuration: 0.3, delay: 0, options: [.beginFromCurrentState]) {
      self.layoutIfNeeded()
    }
  }
}

And then we can host the SquareView in some parent UIView or UIViewController

class ViewController: UIViewController {

  private var squareVws: [SquareView] = []

  override func viewDidLoad() {
    super.viewDidLoad()

    squareVws = (0..<3).map { idx in
      SquareView(
        frame: CGRect(
          x: view.bounds.midX - 50,
          y: CGFloat.lerp(
            start: (view.bounds.minY + 100),
            end: (view.bounds.maxY - 200),
            factor: CGFloat(idx) / 2
          ),
          width: 100, height: 100
        )
      )
    }

    squareVws.forEach { view.addSubview($0) }
  }  
}

Problem

Next we can add a UIPanGestureRecognizer on the ViewController and forward the gesture events to selected views.

enum GestureEvent {
  case began
  case changed(CGPoint)
  case ended
}

class SquareView: UIView {
    func handleGestureEvent(_ event: GestureEvent) {
    switch event {
    case .began:
      resetProps(SquareViewProps(
        color: .red,
        scale: 1.2,
        position: props.position
      ))

    case .changed(let translation):
      props.position = CGPoint.add(translation, props.position)

    case .ended:
      resetProps(SquareViewProps(position: props.position))
    }
  }

  // ...
}

class ViewController: UIViewController {

  private var squareVws: [SquareView] = []
  private var selectedVws: [SquareView] = []

  override func viewDidLoad() {
    // ...

    let dragGesture = UIPanGestureRecognizer(
      target: self,
      action: #selector(handleDrag)
    )

    view.addGestureRecognizer(dragGesture)
  }

  @objc func handleDrag(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .began:
      let pt = sender.location(in: view)
      selectedVws = squareVws.filter { $0.frame.contains(pt) }
      handleGestureEvent(.began)

    case .changed:
      let translation = sender.translation(in: view)
      handleGestureEvent(.changed(translation))
      sender.setTranslation(.zero, in: view)

    case .ended:
      handleGestureEvent(.ended)
      selectedVws = []

    default:
      break
    }
  }

  func handleGestureEvent(_ event: GestureEvent) {
    selectedVws.forEach { $0.handleGestureEvent(event) }
  }
}

So far so good but with this implementation we receive gesture events after the drag has started but we want to receive the .began as soon as the user touches the square. We can use the UITapGestureRecognizer but it only activates at touch up and not at touch down. So either we need to rollout our own gesture or ‘hack’ UILongPressGestureRecognizer

class ViewController: UIViewController {

  private var squareVws: [SquareView] = []
  private var selectedVws: [SquareView] = []

  override func viewDidLoad() {
    super.viewDidLoad()

    // ...

    let tapGesture = UILongPressGestureRecognizer(
      target: self,
      action: #selector(handleTap)
    )
    tapGesture.minimumPressDuration = 0.1

    let dragGesture = UIPanGestureRecognizer(
      target: self,
      action: #selector(handleDrag)
    )

    view.addGestureRecognizer(tapGesture)
    view.addGestureRecognizer(dragGesture)
  }

  @objc func handleTap(_ sender: UILongPressGestureRecognizer) {
      switch sender.state {
      case .began:
        let pt = sender.location(in: view)
        selectedVws = squareVws.filter { $0.frame.contains(pt) }
        handleGestureEvent(.began)

      case .ended:
        handleGestureEvent(.ended)
        selectedVws = []

      default:
        break
      }
  }

  @objc func handleDrag(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .changed:
      let translation = sender.translation(in: view)
      handleGestureEvent(.changed(translation))
      sender.setTranslation(.zero, in: view)

    default:
      break
    }
  }

  func handleGestureEvent(_ event: GestureEvent) {
    selectedVws.forEach { $0.handleGestureEvent(event) }
  }
}

But this poses another problem. On a UIView by default only one gesture recognizer is active at a time. So once the UILongPressGestureRecognizer is activated UIPanGestureRecognizer is ignored.

Solution

Gesture recognizers have a defined order of precedence. So if multiple gesture recognizers are attached to a view, the winner is decided by the default rules. But we can override the rules by implementing the UIGestureRecognizerDelegate. For our case since each gesture recognizer is listening to different states we can have both the gestures active at the same time

class ViewController: UIViewController {

  // ...    


  override func viewDidLoad() {
    super.viewDidLoad()

    let tapGesture = UILongPressGestureRecognizer()
    let dragGesture = UIPanGestureRecognizer()

    // ...    

    tapGesture.delegate = self
    dragGesture.delegate = self
  }
}

extension ViewController: UIGestureRecognizerDelegate {
  public func gestureRecognizer(
    _ gestureRecognizer: UIGestureRecognizer,
    shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer
  ) -> Bool {
    return gestureRecognizer is UILongPressGestureRecognizer
    && otherGestureRecognizer is UIPanGestureRecognizer
  }
}

The solution is available on https://github.com/chunkyguy/MoveMe

References

Hello ionic

Sidharth Juyal — Fri, 06 Sep 2024 16:13:00 +0000

In the next series of how javascript is slowly taking over the tech let’s try Ionic.

On their home page Ionic Framework calls themselves as The Cross-Platform App Development Leader. Lets find out the truth in that.

I remember using Cordova back in 2010 and honestly the mobile landscape was very different back then. From what I’ve read so far, ionic was built on top of Cordova and angular.js but there is also an out-of-box template for react, which is what I’m probably going to use today. So let’s go!

Setup

First start the ionic cli.

npm install -g @ionic/cli native-run cordova-res

Running ionic start --list reveals the following list of templates:

Starters for @ionic/react (--type=react)

name | description
--------------------------------------------------------------------------------------
blank | A blank starter project
list | A starting project with a list
my-first-app | A template for the "Build Your First App" tutorial
sidemenu | A starting project with a side menu with navigation in the content area
tabs | A starting project with a simple tabbed interface

So I’m obviously going to use the blank template:

ionic start photoapp blank --type=react --capacitor

And then few more installs:

npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem

And then a few more:

npm install @ionic/pwa-elements

And then finally a few minutes later running ionic serve starts the good old familiar vite react app on the browser. Good, but I thought we are building a mobile app. So let’s fix that.

First we need to build the project.

ionic build
ionic cap add ios
ionic cap add android

Later in development if we wish to copy the web project into iOS, we need to run the ionic cap copy command. And need to sync after adding plugins we need to run the ionic cap sync command.

And then finally to run the project for iOS we need to run the ionic cap open ios command. This would open the Xcode project from where we can actually run the app in our favorite simulator.

Drawing UI

Very nice. Now let’s switch gears to rendering. Ionic provides a nice list of UI components to avoid lazy devs like me from writing the css. To make a 2 column grid of photos we can make use of IonGrid. IonGrid is made up of many IonRow, and IonRow is made up of many IonCol items.

So make a 2 column grid we can design our grid as:

type PhotoTileProps = {
  photo: Photo | null;
};

function PhotoTile(props: PhotoTileProps | null) {
  return (
    props?.photo && (
      <IonCol>
        <IonImg src={props.photo.thumbnailUrl} />
      </IonCol>
    )
  );
}

type PhotoRowProps = {
  left: Photo | null;
  right: Photo | null;
};

function PhotoRow(props: PhotoRowProps) {
  return (
    <IonRow>
      <PhotoTile photo={props.left} />
      <PhotoTile photo={props.right} />
    </IonRow>
  );
}

export default function PhotoList() {
  const [photoList, setPhotoList] = useState<Array<PhotoRowProps>>([]);

  async function fetchData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/photos");
    const content = await response.json();
    const list = content as Photo[];
    let props: Array<PhotoRowProps> = [];
    for (let index = 0; index < list.length; index += 2) {
      const element = list[index];
      let row: PhotoRowProps = {
        left: list[index],
        right: list[index + 1],
      };
      props.push(row);
    }
    setPhotoList(props);
  }

  return (
    <IonGrid>
      {photoList.map((item, index) => (
        <PhotoRow key={index} left={item.left} right={item.right} />
      ))}
    </IonGrid>
  );
}

This should work for even numbered elements, but for odd numbered elements our grid would look weird, since the last element would occupy the entire width. I can reproduce this bug by only rendering 3 elements

An easy fix is to always draw the IonCol

function PhotoTile(props: PhotoTileProps) {
  return (
    <IonCol>
      <IonImg src={props.photo?.thumbnailUrl} />
    </IonCol>
  );
}

For details page we can build a UI similarly.:

type PhotoDetailProps = {
  id: string;
};

export default function PhotoDetail(props: PhotoDetailProps) {
  const [photo, setPhoto] = useState<Photo | undefined>(undefined);

  async function fetchData() {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/photos/${props.id}`
    );
    const content = await response.json();
    const photo = content as Photo;
    setPhoto(photo);
  }

  useEffect(() => {
    fetchData();
  }, []);

  return !photo ? (
    <IonSpinner />
  ) : (
    <PhotoTile
      photo={photo}
    />
  );
}

Navigation

The boilerplate app already provides a router which looks very familiar because, no surprise, it’s a wrapper around react-router.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home">
          <Home />
        </Route>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

And to extend the router to show a details page with param we can add the usual react-router styled Route. So for our photo app our routes would look like:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} />
        <Route path="/details/:id" component={Details} />
        <Redirect exact from="/" to="/home" />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

To parse the path argument we can use the RouteComponentProps.

interface UserDetailPageProps
  extends RouteComponentProps<{
    id: string;
  }> {}

export default function Details(props: UserDetailPageProps) {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Photo {props.match.params.id}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <PhotoDetail id={props.match.params.id} />
      </IonContent>
    </IonPage>
  );
}

Now to navigate between Home and Details we can use the routerLink that is provided with a lot of Ionic components, like the IonCard

type PhotoTileProps = {
  routerLink: string;
  photoUrl: string | undefined;
  photoTitle: string | undefined;
};

function createPhotoTileProps(photo: Photo): PhotoTileProps {
   return {
     routerLink: `/details/${photo.id}`,
     photoUrl: photo.thumbnailUrl,
     photoTitle: undefined,
   };
}

export default function PhotoTile(props: PhotoTileProps) {
  return (
    <IonCard routerLink={props.routerLink}>
      <IonCol>
        <IonImg src={props.photoUrl} />
        {props.photoTitle && <IonLabel>{props.photoTitle}</IonLabel>}
      </IonCol>
    </IonCard>
  );
}

And there you have it. The photo app with Ionic framework!

As a final step, let’s build and run the app using Xcode one more time. So running ionic build && ionic cap copy one more time. And then running the app from Xcode. Viola!

The details screen seems to be missing the back button. The fix is actually very simple, just add the IonBackButton

<IonToolbar>
  <IonButtons slot="start">
    <IonBackButton defaultHref="#"></IonBackButton>
  </IonButtons>
  <IonTitle>Photo {props.match.params.id}</IonTitle>
</IonToolbar>

Conclusion

I think Ionic is pretty solid framework for web developers. You can almost always tell that this is web UI, and I don’t think ionic is trying to hide that fact. But like with every thing software there are always trade-offs and the fact that Ionic is not limiting the web devs from using 100% of their expertise can be a huge win.

Like always the code from this experiment is available at https://github.com/chunkyguy/PhotoApp

References

React navigation basics

Sidharth Juyal — Sun, 01 Sep 2024 13:37:00 +0000

I just realized that I’ve never made the photos app with react.js. So let’s do that today.

Setup

I’m going to use vite to build the app with javascript.

npm create vite@latest .
npm install
npm run dev

And we have our app up and running.

Fetch data

To fetch and display data in react is a three step process. First we need useState to hold the data:

const [photoList, setPhotoList] = useState([]);

Then we need a useEffect to fetch the data. One way is to use the promises:

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((content) => setPhotoList(content));
  }, []);

Another way is to create an async function and call it from useEffect:

  async function fetchData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/photos");
    const content = await response.json();
    setPhotoList(content);
  }

  useEffect(() => {
    fetchData();
  }, []);

And then draw the UI.

Drawing content

To render the data we can simply use the html unordered list

return (
  <>
    {photoList.length === 0 ? (
      <p>Loading ...</p>
    ) : (
      <ul>
        {photoList.map(({ id, title, thumbnailUrl }) => {
          return (
            <li key={id}>
                <img src={thumbnailUrl} alt={title} />
            </li>
          );
        })}
      </ul>
    )}
  </>
);

In the true spirit of react we can probably move the li out as a reusable component and call it PhotoTile:

export function PhotoTile({ title, thumbnailUrl }) {
  return (
    <li className="photoTile">
      <img src={thumbnailUrl} alt={title} />
    </li>
  );
}

and reduce our App.jsx to

<ul className="photoList">
  {photoList.map(({ id, title, thumbnailUrl }) => (
    <PhotoTile key={id} title={title} thumbnailUrl={thumbnailUrl} />
  ))}
</ul>

Next, to make the list 2 columns we can use grid, flexbox or one of the infinite other methods out there, but my favorite is to simply use the column-count

<ul className="photoList"> 
  ...
</ul>

.photoList {
  column-count: 2;
}

Navigation

And now the real deal. The react-router-dom. This changes everything. First we need to install the dependency obviously.

npm install react-router-dom

Then we need to update the main.jsx to use the router

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
]);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

To navigate to the details, we need to register the route with params:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/details/:id",
    element: <Details />,
  },
]);

Then in the Details we can get the param value with useParams() hook

export function Details() {
  const { id } = useParams();
  const [photo, setPhoto] = useState(null);

  async function fetchData(id) {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/photos/${id}`
    );
    const content = await response.json();
    setPhoto(content);
  }

  useEffect(() => {
    fetchData(id);
  }, [id]);

  return (
    <>
      {!photo ? (
        <Loading />
      ) : (
        <ul>
          <div className="photoDetails">
            <PhotoTile title={photo.title} url={photo.url} />
            <p>{photo.title}</p>
          </div>
        </ul>
      )}
    </>
  );
}

And then to navigate between screens we need to make use of the Link component:

export function PhotoTile({ title, url, path }) {
  return (
    <li className="photoTile">
      <Link to={path}>
        <img src={url} alt={title} />
      </Link>
    </li>
  );
}

And then construct the details path from Home screen like:

<PhotoTile
  key={id}
  title={title}
  url={thumbnailUrl}
  path={`/details/${id}`}
/>

And back to home from the Details screen:

<PhotoTile title={photo.title} url={photo.url} path={"/"} />

Conclusion

And there we have the basics of a React app with navigation. The react-router is always evolving, there were some new changes in the v6 which I tried to use. But looks good and works like charm.

The link from this experiment is available at https://github.com/chunkyguy/PhotoApp/tree/master/react.

References

Let's reanimate

Sidharth Juyal — Tue, 27 Aug 2024 21:43:00 +0000

Drawing text and images is one thing but the real test of a UI framework is in how good is it with animating content.

And my test for animation is the classic MoveMe based on the Apple’s sample code.

The idea is to draw three boxes on the screen. When selected the box changes color and scales up and then can be moved around with the drag gesture and eventually restores back to original color and size when released.

Let’s build that sample using React Native’s Reanimated library.

Setup

I’m following the official docs but not using their template. So I’ve a basic project created with the blank template and installed the dependencies

npx create-expo-app playground --template blank
npx expo install react-native-reanimated
npx expo install react-native-gesture-handler

Next, I added the plugin

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

And then draw 3 squares on screen:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, View } from "react-native";
import Animated from "react-native-reanimated";

function Square() {
  return <Animated.View style={styles.square}></Animated.View>;
}

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Square />
      <Square />
      <Square />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "space-evenly",
  },
  square: {
    width: 100,
    height: 100,
    backgroundColor: "blue",
  },
});

Add gesture handler

To add support for gesture handlers we first need to wrap the content within the GestureHandlerRootView

<GestureHandlerRootView style={styles.container}>
  <Square />
  <Square />
  <Square />
</GestureHandlerRootView>

And then wrap each Square within GestureDetector

function Square() {
  const gesture = Gesture.Pan();

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={styles.square} />
    </GestureDetector>
  );
}

Handle gesture events

To handle gesture we first need to create a SharedValue which is like State but for animation states. For example, to change the background color when selected we need to listen to onBegin and onFinalize events and update the style:

function Square() {
  const isPressed = useSharedValue(false);
  const animStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: isPressed.value ? "red" : "blue",
    };
  });

  const gesture = Gesture.Pan()
    .onBegin(() => {
      isPressed.value = true;
    })
    .onFinalize(() => {
      isPressed.value = false;
    });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.square, animStyle]} />
    </GestureDetector>
  );
}

Supporting drag is similar. We need to store start and current positions and then update the current position on onChange event. The onChange provides the delta change that we then need to add to the start position to calculate the final current position. And then, finally at the onFinalize event we can sync the start and current positions.

function Square() {
  const isPressed = useSharedValue(false);
  const startPos = useSharedValue({ x: 0, y: 0 });
  const pos = useSharedValue({ x: 0, y: 0 });
  const animStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: isPressed.value ? "red" : "blue",
      transform: [
        { translateX: pos.value.x },
        { translateY: pos.value.y },
        { scale: withSpring(isPressed.value ? 1.2 : 1) },
      ],
    };
  });

  const gesture = Gesture.Pan()
    .onBegin(() => {
      isPressed.value = true;
    })
    .onChange((e) => {
      pos.value = {
        x: startPos.value.x + e.translationX,
        y: startPos.value.y + e.translationY,
      };
    })
    .onFinalize(() => {
      isPressed.value = false;
      startPos.value = {
        x: pos.value.x,
        y: pos.value.y,
      };
    });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.square, animStyle]} />
    </GestureDetector>
  );
}

And there you have it

References

Jetpack compose navigation

Sidharth Juyal — Fri, 16 Aug 2024 23:20:00 +0000

It’s Friday night! And you know what that means right? It’s time to dig deeper into Jetpack Compose. And today I would like to try out the navigation between screens with Jetpack Compose.

How hard can it?

Setup

Installing dependencies is never fun in an Android project. First you need to find the libs.version.toml file and add these lines:

[version]
androidx-navigation = "2.7.7"
kotlinxSerializationJson = "1.6.3"

[libraries]
androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "androidx-navigation" }
kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }

[plugins]
kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }

Run gradle sync. Then open the build.gradle.kts within the app/ and apply the plugin and add the dependency

plugins {
  // ...
  alias(libs.plugins.kotlin.serialization)
}

dependencies {
  // ...
  implementation(libs.androidx.navigation.compose)
  implementation(libs.kotlinx.serialization.json)
}

And then do another round of gradle sync.

If all went fine so far, then you’re all set for writing the code. If not, delete your project and start from scratch.

Implementation

Navigation in Android works with the help of these 2 components:

NavController: Top level object to navigate between screens
NavHost: Container within which all routing happens.

So to make this work, we first need to inject the NavController at the root level of the app. Like say the MainActivity or the root composable like PhotoApp in our case.

fun PhotoApp(
  navController: NavHostController = rememberNavController()
) { .. }

And then simply setup all the available routes

NavHost(
  navController = navController,
  startDestination = "home"
) {
  composable("home") {
    HomeScreen(
      onSelectPhoto = { navController.navigate("photos/${it.id}") },
      modifier = Modifier.fillMaxSize()
    )
  }

  composable("photos/{id}") {
    DetailScreen(
      id = it.arguments?.getString("id") ?: "0",
      modifier = Modifier.fillMaxSize()
    )
  }
}

And that is all there to it.

Thoughts

Now of course, one can go crazy with typed routing with sealed classes and what not. But this is the gist of it.

Just like React Native, the path arguments are by default string types and if there’s more data to be passed between the screens we need to come up with our strategy.

The good thing is the the back button comes for free with Android OS. But for custom back button we again need to devise our own tooling.

So there is how you navigate between screens with Android. The code for this experiment is up there sitting in the cloud nicely with the rest of the PhotoApp.

https://github.com/chunkyguy/PhotoApp/tree/master/kotlin

References

Dear expo, who are you?

Sidharth Juyal — Tue, 23 Jul 2024 20:58:00 +0000

Let’s try expo.

The motivation behind this experiment is neither my eternal curiosity for exploring new technologies nor is this post sponsored by expo in any way. Rather it is the fact that the nice folks at React Native have killed our beloved React Native CLI. You don’t even see the instructions to create React Native apps using the CLI anymore, as if it never existed! So, without losing another tear on the past let’s take a sneak peek into the future.

Set up

The official command on React Native official docs to create a new project npx create-expo-app@latest generates a ton of boilerplate. It’s better to use the command they hand out at the official expo docs.

npx create-expo-app PhotoApp --template blank.

Which brings to first source of ambiguity - which docs are more recent? But continuing with our experiment step 1 is probably all you need to get started. Next, running npm run ios generates a nice UI

Looking at the project directory in details shows that there are way fewer files and folders:

.
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package-lock.json
└── package.json

Now compare this with the older files and folders:

.
├── App.jsx
├── Gemfile
├── Gemfile.lock
├── README.md
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── jest.config.js
├── metro.config.js
├── node_modules
├── package-lock.json
├── package.json
├── tsconfig.json
└── vendor

Expo router

Since I don’t think a lot has changed in the UI and state management. I’m going to jump directly at the real deal - the expo router. And with the real React Native developer spirit, just copy this one liner and install these bunch of dependencies and see the time fly

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Next, update the entry point to expo-router

- "main": "expo/AppEntry.js"
+ "main": "expo-router/entry"

And add scheme to app.json

+ "scheme": "your-app-scheme"

And then again ignoring all the rest of the steps, since we don’t care about the web. Voila we have switched to expo-router!

Navigation

At first glance it seems the navigation is heavily inspired by next.js. Every screen is path based auto linked. So index.js links to the / path, aka the Home. And for details screen we can use the parameterized path, like /photos/[id] that would then magically navigate to the right Details screen. And finally to describe the container we use the special component called _layout.js

For our app then the folder structure looks like:

./app
├── _layout.js
├── index.js
└── photos
    └── [id].js
./components
├── photo_list.js
└── photo_tile.js

Since we want the navigation to be simple stack based, our _layout.js looks like:

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" />
      <Stack.Screen name="photos/[id]" />
    </Stack>
  );
}

Then within the /index.js file is where we render a Home screen that renders a FlatList with each cell rendering a cell with an image and a title. And whenever the cell is tapped we invoke the router to take us to the photo/[id] path

<PhotoList
  photoList={photoList}
  onSelectPhoto={({ title, url }) => {
    router.push({
      pathname: "/photos/[id]",
      params: { title, url },
    });
   }
  }
/>

And later on in the /photos/[id].js we can read the passed params and draw the UI

export default function DetailsScreen() {
  const { title, url } = useLocalSearchParams();
  return (
    <SafeAreaView style={styles.container}>
      <Image style={styles.image} source={
        {uri: url }
      } />
      <Text style={styles.title}>{title}</Text>
    </SafeAreaView>
  );
}

Conclusion

And that’s all there is the learn. Expo looks neat. I like the path based navigation. Feels way better than other frameworks. And the best part is, like Steve Jobs would say, that it just works.

I also like that they cleaned up the project a lot. But that said, I don’t know if I’m going to miss having access to the dedicated ios and android folders. What if for some reason I have to add some data to Info.plist file or toggle some specific build setting. I hope there’s a easy way to make that work.

TLDR; I like expo and for my future React Native project I’m definitely going to use expo!

The code from this experiment is with the rest of the project at https://github.com/chunkyguy/PhotoApp

UIScrollView and Autolayout

Sidharth Juyal — Sun, 28 Apr 2024 10:24:00 +0000

This a quick reference on how to make UIScrollView work with autolayout

Solution 1: Where the content has a fixed size

class ContentView: UIView {}

class ViewController: UIViewController {
  // ...
  override func viewDidLoad() {
    super.viewDidLoad()
    let contentVw = ContentView(frame: CGRect(
      x: 0, y: 0,
      width: 1024, 
      height: 1024
    ))
    let scrollVw = UIScrollView()

    VFL(view)
      .add(subview: scrollVw, name: "scrollVw")
      .applyConstraints(formats: [
        "H:|[scrollVw]|", "V:|[scrollVw]|"
      ])

    VFL(scrollVw)
      .addSubview(contentVw)

    scrollVw.backgroundColor = .red
    scrollVw.contentSize = contentVw.frame.size
  }
}

Solution 2: Where the content has an intrinsicContentSize

class ContentView: UIView {
  override var intrinsicContentSize: CGSize {
    CGSize(width: 1024, height: 1024)
  }
}

class ViewController: UIViewController {
  // ...
  override func viewDidLoad() {
    super.viewDidLoad()
    let contentVw = ContentView()
    let scrollVw = UIScrollView()

    VFL(view)
      .add(subview: scrollVw, name: "scrollVw")
      .applyConstraints(formats: [
        "H:|[scrollVw]|", "V:|[scrollVw]|"
      ])

    VFL(scrollVw)
      .add(subview: contentVw, name: "contentVw")
      .applyConstraints(formats: [
        "H:|[contentVw]|", "V:|[contentVw]|"
      ])
  }
}

Solution 3: Where the content has a flexible size

class ContentView: UIView {  
  weak var scrollVw: UIScrollView?

  override func layoutSubviews() {
    super.layoutSubviews()    
    scrollVw?.contentSize = bounds.size
  }
}

class ViewController: UIViewController {
  // ...
  override func viewDidLoad() {
    super.viewDidLoad()
    let contentVw = ContentView()
    let scrollVw = UIScrollView()

    VFL(view)
      .add(subview: scrollVw, name: "scrollVw")
      .applyConstraints(formats: [
        "H:|[scrollVw]|", "V:|[scrollVw]|"
      ])

    VFL(scrollVw)
      .add(subview: contentVw, name: "contentVw")
      .applyConstraints(formats: [
        "H:[contentVw]", "V:[contentVw]"
      ])

    // layout based on grandparent view    
    VFL(contentVw)
      .appendConstraints([
        contentVw.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        contentVw.trailingAnchor.constraint(
            equalTo: view.trailingAnchor,
            constant: 1024
        ),
        contentVw.topAnchor.constraint(equalTo: view.topAnchor),
        contentVw.bottomAnchor.constraint(
            equalTo: view.bottomAnchor,
            constant: 1024
        ),
      ])

    contentVw.scrollVw = scrollVw
  }
}

References:

Let's build a calculator

Sidharth Juyal — Wed, 06 Mar 2024 21:21:00 +0000

Let’s build a calculator!

I saw this challenge on the frontendmentor website and the very next day while traveling to work I was trying to figure out how would I construct a calculator. I was thinking more like in terms of a real mechanical calculator rather than a software and then trying to figure out a circuit diagram.

This is what I came up with:

Let me explain what is this mess.

The data goes through 5 different stages, starting from I nput that the user provides with the user interface and then depending on the type of the input it might go to the B uffer or the O perations, both of which are string types. But any change to the O perations would trigger an update to the stored R esult which is a number type and most likely a floating type. The result is computed using the last stored value and the value in the buffer. And finally, every input should eventually refresh the text on D isplay.

So for any numeric input we just update our buffer. The special case is with 0 since we don’t want multiple leading 0s. Finally we concatenate the buffer and send the output string for display.

let buf = ["0"];

function handleInput(key) {
  switch (key) {
    // ....

    default:
      if (!"0123456789".includes(key)) return undefined;
      // if the only digit in buffer is a 0 then replace it with the input
      if (buf.length === 1 && buf[0] === "0") {
        buf[0] = key;
      } else {
        buf.push(key);
      }
      return buf.join("");
  }
}

If the input is a command type (like +-*/=) then we compute the result with the value in buffer and the last result and the last cached command. Remember that + operation is actually performed after the user presses the = button. For example:

Input	Cache	Display
5		5
+	+	5
3	+	5
=	=	8

Another caveat is to avoid keeping a default result value like say a 0. As this might not work for some operations like * where then anything that multiplies with 0 becomes 0. It’s better to just keep it undefined initially.

let res = undefined;
let fn = undefined;

const add = (res, curr) => res + curr;
const sub = (res, curr) => res - curr;
const mul = (res, curr) => res * curr;
const div = (res, curr) => res / curr;
const eql = (res, curr) => res;

function computeResult(next) {
  let curr = parseFloat(buf.join(""));
  curr = isNaN(curr) ? 0 : curr;

  if (res === undefined) {
    res = curr;
  } else {
    res = fn(res, curr);
  }

  fn = next;

  return res.toString();
}

function handleInput(key) {
  switch (key) {
    case "+":
      return computeResult(add);

    case "-":
      return computeResult(sub);

    case "*":
      return computeResult(mul);

    case "/":
      return computeResult(div);

    case "=":
      return computeResult(eql);

    // ...
  }
}

Then there is the special case of handling . key. In this case we simply add the . to the buffer is it isn’t there already.

function handleInput(key) {
  switch (key) {
    case ".":
      if (!buf.includes(".")) {
        buf.push(".");
      }
      return buf.join("");

    // ...
  }
}

Similar buffer manipulations can be performed for other commands like when user presses the DEL button which just pops the buffer.

function handleInput(key) {
  switch (key) {
    case "Backspace":
      buf.pop();
      if (buf.length === 0) {
        buf = ["0"];
      }
      return buf.join("");

    // ...
  }
}

You must have realized that although internally we keep the computed result in res as number but we return back a string. This is to avoid dealing with the complexities that comes when dealing with floating point numbers. The drawing output to display is then simply the matter of string manipulation, and in my personal case since my calculator can not fit more than 13 digits I can simply not display more than 13 chars.

const outFld = document.querySelector("#output");

function draw(text) {
  if (text === undefined) return;
  outFld.innerHTML = text.slice(0, 13);
}

If you want you can play with the final result here or go play with the source code

Hello MAUI

Sidharth Juyal — Tue, 23 Jan 2024 23:30:00 +0000

So another cross platform tool that I’ve been trying to poke for a very very long time now is .NET MAUI. Since I love making games with Unity and C# so I’ve always wondered what would it feel like to also make apps with C#. Also I’ve heard good things about .NET. So yes, lets dive into it.

Set up

The first struggle getting started with MAUI is that according to the official docs the first step is to Download and install Visual Studio 2022 for Mac but also recently they announced that Visual Studio for Mac is going away soon. The recommended route for the upcoming future is to use the Visual Studio Code with the official extensions, so this is what I’m also going to try.

So let’s install:

vscode extensions
dotnet
dotnet workload install maui

Next up, create the project using whatever they tell you to. And then after spending a weekend updating and installing the ‘correct’ version of macOS, Xcode, Simulator runtimes and whatnot we finally have our MAUI project building and running!

Maybe using Android as the base development target would had been easier, but who know

Let’s make the app

So the next struggle is to find good resources on learning .NET MAUI. There are very limited resources out there. From the official docs I was able to find a good tutorial on getting started with MAUI. The workshop is about building an app called Monkey Finder. Sounds great!

So again looking at our json data from jsonplaceholder/photos

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
]

the first thing we need is a model object, conveniently called Photo

public class Photo
{
    public int albumId { get; set; }
    public int id { get; set; }
    public string title { get; set; }
    public string url { get; set; }
    public string thumbnailUrl { get; set; }
}

Next, we want to render this object in an element. With MAUI or .NET development in general it seems to be the standard practice to group classes under an various namespace grouping similar functionalities, like Models and Views. So the Photo type above would be under namespace PhotoApp.Models and all the views would be under namespace PhotoApp.Views.

Then in the xaml files the namespaces can be imported as:

xmlns:views="clr-namespace:PhotoApp.Views"

Another pattern is to use a local namespace for the entire App code and no more worrying about namespaces anymore.

xmlns:local="clr-namespace:PhotoApp"

To be honest I can’t make up my mind. I’ll try them both out and see whatever feels good.

The UI API is like any other old school xml based api. So for a list of items with each item having a image and text elements vertically laid out we can use a CollectionView

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:PhotoApp.Models"
             x:Class="PhotoApp.Views.MainPage">
    <CollectionView>
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type models:Photo}">
                <models:Photo
                    albumId="1"
                    id="1"
                    title="accusamus beatae ad facilis cum similique qui sunt"
                    url="https://via.placeholder.com/600/92c952"
                    thumbnailUrl="https://via.placeholder.com/150/92c952" />
                <models:Photo 
                    albumId="1"
                    id="2"
                    title="reprehenderit est deserunt velit ipsam"
                    url="https://via.placeholder.com/600/771796"
                    thumbnailUrl="https://via.placeholder.com/150/771796" />
                <models:Photo 
                    albumId="1"
                    id="3"
                    title="officia porro iure quia iusto qui ipsa ut modi"
                    url="https://via.placeholder.com/600/24f355"
                    thumbnailUrl="https://via.placeholder.com/150/24f355"/>
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Photo">
                <VerticalStackLayout Padding="8">
                    <Image Source="{Binding thumbnailUrl}" />
                    <Label 
                        Text="{Binding title}" 
                        HorizontalOptions = "LayoutOptions.CenterAndExpand" />
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

The interesting bit is that while prototyping we can hardcode that data right within xaml using CollectionView.ItemsSource.

Each element within the collection view needs a ItemTemplate and then within the ItemTemplate we can define the sort of function per data type with DataTemplate with the argument being passed in as Binding.

Mentally I think of this in code as:

CollectionView(
    itemsSource = Photo[] { ... },
    itemTemplate = {
        dataTemplate = (binding: Photo) => View { ... }
    }
)

And similarly for the details page we can do something like:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:models="clr-namespace:PhotoApp.Models"
             x:Class="PhotoApp.Views.DetailsPage">
    <CollectionView>
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type models:Photo}">
                <models:Photo
                    albumId="1"
                    id="1"
                    title="accusamus beatae ad facilis cum similique qui sunt"
                    url="https://via.placeholder.com/600/92c952"
                    thumbnailUrl="https://via.placeholder.com/150/92c952" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Photo">
                <VerticalStackLayout Padding="8">
                    <Image Source="{Binding url}" />
                    <Label 
                        Text="{Binding title}" 
                        HorizontalOptions = "LayoutOptions.CenterAndExpand" />
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

One of the cool things that I like about xaml is that we can use the shorthand or the long version of a tag. So these two are identical:

<Label FontSize="22" />

<Label>
    <Label.FontSize>
        22
    </Label.FontSize>
</Label>

Navigation

So how about adding a transition between the screens. To achieve this there are quite a number of steps.

First we need to register a route. This is pretty simple in MAUI. There’s actually a pretty nice convenience way to avoid hardcoding "DetailsPage" by using the nameof expression.

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(DetailsPage), typeof(DetailsPage));
    }
}

Next sticking with the MVC pattern we need to create a MainController class for our MainPage. The controller only has a single command which is to invoke the "DetailsPage" route

public partial class MainController : ObservableObject
{
    [RelayCommand]
    async Task Tap()
    {
        await Shell.Current.GoToAsync(nameof(DetailsPage));
    }
}

And next we need to inject the MainController as an dependency to the MainPage.

public partial class MainPage : ContentPage
{
    public MainPage(MainController controller)
    {
        InitializeComponent();
        BindingContext = controller;
    }
}

We need to set the BindingContext to the controller to have this available in the associated xaml file. And that is where we can add a TapGestureRecognizer to the Image

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:PhotoApp.Models"
             xmlns:ctrls="clr-namespace:PhotoApp.Controllers"
             x:Class="PhotoApp.Views.MainPage"
             x:DataType="PhotoApp.Controllers.MainController">
    <CollectionView>
        <CollectionView.ItemsSource> ... </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Photo">
                <VerticalStackLayout Padding="8">
                    <Image Source="{Binding thumbnailUrl}">
                        <Image.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={RelativeSource AncestorType={x:Type ctrls:MainController}}, Path=TapCommand}" />
                        </Image.GestureRecognizers>
                    </Image>
                    <Label 
                        Text="{Binding title}" 
                        HorizontalOptions = "LayoutOptions.CenterAndExpand" />
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

The final missing piece is to make sure that the MainController is injected into our MainPage when constructed. This can be done in the MauiProgram

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        // ...
        builder.Services.AddSingleton<MainPage>();
        builder.Services.AddSingleton<MainController>();
        // ...
        return builder.Build();
    }
}

This pattern prepares the builder factory to provide instances as a singleton or as transient whenever requested.

And with this in place we can finally go from MainPage to DetailsPage

To pop back we need to create and bind a DetailsController with DetailsPage and navigate back to parent with ..

public partial class DetailsController : ObservableObject
{
    [RelayCommand]
    async Task GoBack()
    {
        await Shell.Current.GoToAsync("..", true);
    }
}


// MainProgram.cs
builder.Services.AddTransient<DetailsPage>();
builder.Services.AddTransient<DetailsController>();


<!-- DetailsPage.xaml -->
<Shell.BackButtonBehavior>
    <BackButtonBehavior Command="{Binding GoBackCommand}" TextOverride="Back" />   
</Shell.BackButtonBehavior>

For some reason I’m unable to have the “Back” text on the navbar. But anyways when I tap on the empty space where the back button should’ve been otherwise I’m able to pop back. Is this a bug or feature it’s too early for me to say.

Fetching data

Next up is fetching data from the network. One easy way to get started is to have pull to refresh. This can be achieved by adding RefreshView to the MainPage

<RefreshView 
    IsRefreshing="{Binding IsRefreshing}"
    Command="{Binding GetPhotosCommand}">
    <CollectionView 
        ItemsSource="{Binding Photos}"
        SelectionMode="None" >
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:Photo">
                <VerticalStackLayout Padding="8">
                    <Image Source="{Binding thumbnailUrl}" />
                    <Label 
                        Text="{Binding title}" 
                        HorizontalOptions = "LayoutOptions.CenterAndExpand" />
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</RefreshView>

Notice that we are now loading the data from a Photos collection from the context, and similarly we are sending the GetPhotosCommand to the context whenever the pull-to-refresh is triggered.

Next step is to actually implement the GetPhotosCommand in BindingContext aka the MainController

public partial class MainController : ObservableObject
{
    public ObservableCollection<Photo> Photos { get; } = new();
    PhotoService photoService;

    [ObservableProperty]
    bool isRefreshing;

    [ObservableProperty]
    string title;

    public MainController(PhotoService photoService)
    {
        this.photoService = photoService;
        Title = "Photos";
    }

    [RelayCommand]
    async Task GetPhotos()
    {
        try
        {
            var photos = await photoService.GetPhotos();
            Photos.Clear();
            // The default photos is a list of 5000 elements .. so we only load first 100
            for (int i = 0; i < photos.Count && i < 100; i++)
                Photos.Add(photos[i]);
        }
        catch (System.Exception ex)
        {
            // TODO: show error UI

        }
        finally
        {
            IsRefreshing = false;
        }
    }
}

Due to the .NET magic, GetPhotosCommand is mapped to GetPhotos method because it is annotated with RelayCommand. And thanks to the magic of ObservableCollection the UI will refresh automatically whenever the collection is updated. But this could have some performance implication, so I tried to only load a few photos.

The final missing piece is the PhotoService, which is also probably the least surprising, just some good old data fetching and json parsing.

public class PhotoService
{
    HttpClient httpClient;

    public PhotoService()
    {
        httpClient = new HttpClient();
    }

    public async Task<List<Photo>> GetPhotos()
    {
        var response = await httpClient.GetAsync("https://jsonplaceholder.typicode.com/photos");
        if (response.IsSuccessStatusCode)
        {
            return await response.Content.ReadFromJsonAsync(PhotoContext.Default.ListPhoto);
        }
        return new List<Photo>();
    }
}

PhotoContext is how cool kids provide a List<Photo> type

[JsonSerializable(typeof(List<Photo>))]
internal sealed partial class PhotoContext : JsonSerializerContext {}

And so we finally can get the data from network

Passing data between screens

And with that the last remaining item on the list is to pass the data between pages. So to keep things simple if we were to have the DetailsPage also make use of CollectionView but rather have an array of one element as data source, our DetailsController would look almost identical to MainController except that we also need to implement the IQueryAttributable to support receiving of data that we would send from the MainPage.

In our case we would be passing a Dictionary with single element in it as Photo

public partial class DetailsController : ObservableObject, IQueryAttributable
{
    public ObservableCollection<Photo> Photos { get; } = new();

    [ObservableProperty]
    string title;

    public DetailsController()
    {
        Title = "Details";
    }

    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        var photo = query["Photo"] as Photo;
        Photos.Add(photo);
    }

    //...
}

Next in the MainController we need to update the TapCommand to take in a Photo as parameter that can be forwarded to the DetailsPage.

public partial class MainController : ObservableObject
{
    [RelayCommand]
    async Task Tap(Photo photo)
    {
        var navigationParameter = new Dictionary<string, object> { { "Photo", photo } };
        await Shell.Current.GoToAsync(nameof(DetailsPage), navigationParameter);
    }

    // ...
}

And finally, from the MainPage UI we need to fill in the Photo as CommandParameter

<DataTemplate x:DataType="local:Photo">
    <VerticalStackLayout>
        <Image Source="{Binding thumbnailUrl}">
            <Image.GestureRecognizers>
            <TapGestureRecognizer 
Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainController}}, Path=TapCommand}" 
CommandParameter="{Binding .}" />
            </Image.GestureRecognizers>
        </Image>
    </VerticalStackLayout>
</DataTemplate>

Conclusion

This brings me to the end of this experiment for now. So how do I feel about MAUI? I think I’m sort of relieved that this experiment is done for now. I feel that MAUI needs a lot of work before it can actually be used for real. There are way too many bugs currently. And on macOS, which I guess is the main machine for most of the mobile devs, working on MAUI with Visual Studio Code was very painful. But I hope it would improve.

Said that, I do like the idea of having a nice language like C# for making apps. MAUI has all the potential to be the best cross-platform mobile development tool out there. Also building on top of .NET and other battle tested Microsoft tech sounds very promising and I was able to find a lot of help online for any question I had. So I would definitely be keeping an eye out for MAUI.

Next I would probably try MAUI from a Windows machine with Visual Studio, you know the way it’s supposed to be, and see if that actually improves the developer experience.

The code is available at github.com/chunkyguy/PhotoApp like always.