Gnarly Learnings from December 2023
Tags: ai, reactnative, react, rails
Published: 2024-01-11 06:01:14

_At The Gnar, we’re always reading, watching, and listening in order to keep our skills sharp and our perspectives fresh. Every month, we round up our learnings and publish them in a Gnarly Learnings blog post._

In December 2023, we learned about **AI applications in finance roles**, strategies for **top converting landing pages**, and **Static Hermes**. We also pondered how the combination of **Rails and Hotwire** can be used to replace some of the functionality previously provided only by **React**.

## Business Applications of AI

McKinsey recently published a [brief generative AI guide for CFOs](https://www.mckinsey.com/capabilities/strategy-and-corporate-finance/our-insights/gen-ai-a-guide-for-cfos) on how and where to integrate gen AI solutions into finance roles.

The writers posit that generative AI can help automate tedious tasks, augment productivity, and accelerate data extraction, potentially increasing the velocity of innovation.

> Gen AI can be an important tool for value creation. CFOs should strive to be gen AI enablers, not gatekeepers, and make sure that strategically critical initiatives rapidly and continually receive necessary resources.

Meg McFarlane recently published a Think With Google article discussing the benefits of [AI-based advertising strategies](https://www.thinkwithgoogle.com/intl/en-emea/marketing-strategies/video/youtube-ai-solutions-oak-furnitureland/).

In a single case study, they found a 36% increase in unique reach, 45% drop in cost, and 30% higher average impression frequency per user by switching YouTube ad strategy to lean more heavily on Google’s AI ad optimization.

> Where in the past we’d have to do a lot of guesswork to determine the ideal rotation between in-stream and bumper ads, we now let the Google AI decide how often each ad was shown and to whom.

## Ecommerce Web Design

In a February 2023 podcast, Logan Grasby discusses the design of [top converting landing pages](https://unofficialshopifypodcast.com/episodes/logan-grasby-landing-pages-v_ph6SOc). He goes into detail about the anatomy of a landing page, discussing the purpose of each section and tips for improving marketing performance.

You can find a summarization of his key points starting around [25:30 in the podcast](https://unofficialshopifypodcast.com/episodes/logan-grasby-landing-pages-v_ph6SOc/transcript?t=25m30s).

Russ Maschmeyer, product lead for spatial commerce at Shopify, discusses a suite of AI tools called [Shopify Magic](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/shopify-magic) in a [recent episode of Practical AI](https://practicalai.fm/246#t=11:20). The tools can help you with a variety of tasks, from generating product descriptions to [generating product imagery](https://huggingface.co/spaces/Shopify/background-replacement).

## Design

In December of 2023, we came across two sites – [Addifico](https://www.addifico.com/) and [ai-chat](https://ai-chat.it/en/) – that present their business and value proposition with eye-catching, interactive websites.


![AI-Chat Screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6blvdes6lpdvs6s1ytcr.png)

![Addifico Screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpf9pi03inxprjy7y9n9.png)

## Mobile App Development

[Hermes](https://hermesengine.dev/), the JavaScript engine built and maintained by Meta, is already fine-tuned for running fast React Native applications. But in the presentation “[Static Hermes: The Next Generation of Hermes](https://youtu.be/q-xKYA0EO-c?si=YcOAE16xz5iycaZa)”, Tzvetan Mikov explains how JavaScript can be compiled to achieve huge leaps in performance.

> [[15:00](https://youtu.be/q-xKYA0EO-c?si=G_jQWjjURdTcnsPD&t=901)] When we started compiling it to native initially, it was the same performance as Hermes…but now as you can see, it is 10x faster when compiled natively…plus we’re certain that there is more headroom. We can probably get to 20x times faster than Hermes.

Tzvetan reports [10x faster performance over traditional Hermes](https://youtu.be/q-xKYA0EO-c?si=G_jQWjjURdTcnsPD&t=901) in one benchmark.

He also emphasizes that native compilation unlocks “the possibility of very efficient native platform integration”, estimating that call overhead could be between [15x and 18x lower than JSI when calling a native function](https://youtu.be/q-xKYA0EO-c?si=tuksL6QgWJHnb7fr&t=1155). This “zero-cost FFI” ultimately opens up the possibility to implement platform integrations “entirely in JavaScript” with “practically no cost, just as if we were a C program”.

![Screenshot from Static Hermes: The Next Generation of Hermes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4vqt8fm2kl6axr7rlq9.png)

If you’re interested in learning more about Static Hermes, Tzvetan created a blog post discussing [how to speed up a micro-benchmark by 300x using Static Hermes](https://tmikov.blogspot.com/2023/09/how-to-speed-up-micro-benchmark-300x.html). 

Gaurav Gautam also wrote a blog post about [compiling TypeScript to native code](https://medium.com/@gautam1168/compiling-typescript-to-native-code-0238d69ca582), which [Tzvetan discussed in a GitHub thread](https://github.com/facebook/hermes/discussions/1137#discussioncomment-7201539). That same GitHub thread yielded this remarkable result from the bunnymark benchmark:

<table>
  <tr>
   <td>Runtime
   </td>
   <td>FPS
   </td>
   <td>CPU
   </td>
   <td>GPU
   </td>
   <td>Memory
   </td>
  </tr>
  <tr>
   <td>C
   </td>
   <td>90
   </td>
   <td>68%
   </td>
   <td>84%
   </td>
   <td>48 MB
   </td>
  </tr>
  <tr>
   <td>Static Hermes
   </td>
   <td>90
   </td>
   <td>70%
   </td>
   <td>84%
   </td>
   <td>53 MB
   </td>
  </tr>
</table>

## Tech Insights

The tech world evolves incredibly fast, so it’s important to stay on top of new strategies for building applications.

It’s our belief that the [Hotwire](https://hotwired.dev/) family of products, including the well-known [Turbo](https://turbo.hotwired.dev/) and [Stimulus](https://stimulus.hotwired.dev/), provide a compelling alternative to React for many types of applications.

Learn more by reading our blog post, “[Ruby on Rails vs. React: Hotwire + Turbo Change the Equation](https://www.thegnar.com/blog/ruby-on-rails-vs-react-hotwire-turbo-change-the-equation)”.

## Gnarly Bytes

* **GraphQL**: This [OWASP Cheat Sheet for GraphQL](https://cheatsheetseries.owasp.org/cheatsheets/GraphQL_Cheat_Sheet.html) is a great summary of best practices
* **Elixir**: [Notesclub](https://notes.club/) is a collection of Elixir Livebooks
* **Artificial intelligence**: [Ollama](https://ollama.ai/) provides a bunch of AI models you can run locally; Fly.io also created a blog post discussing [how to run Ollama models on Fly](https://fly.io/blog/scaling-llm-ollama/)
* **Ruby**: [Ruby on Jets](https://docs.rubyonjets.com/) is an interesting Ruby serverless framework for building and deploying APIs to AWS lambda
* **Libraries**: We discovered [Spotlight](https://spotlightjs.com/), a library pitched as “Sentry for Development” (the library is created by [Sentry](https://sentry.io/welcome/)), aims to provide a rich debugging experience during development

## Contributors:
* [Nick Maloney](https://github.com/ngmaloney)
* [Royce Threadgill](https://github.com/jrthreadgill)

_Learn more about how The Gnar <a href="https://www.thegnar.com/software-development">builds software</a>._