DEV Community: Heather Stevens

Hatchify: The Fastest Way to Build JSON: APIs

Heather Stevens — Fri, 22 Mar 2024 14:58:44 +0000

Last week, Bitovi Hatchify officially left the nest! Hatchify is a suite of low-code libraries that provides a powerful scaffold to build CRUD-heavy applications, eliminate boilerplate, and enable your team to focus on domain-specific functionality from day one. Hatchify empowers you to build admin views, dashboards, and B2B apps faster, all while retaining uncompromising flexibility.

One of Hatchify’s long-term objectives is to help developers move faster across all layers of the web stack. In the initial release, we’re most proud of our backend feature set that helps get CRUD API development out of the way early. We built the fastest way to get a high-quality JSON: API implementation packed with features like advanced filtering capabilities, related data queries, and specified response fields.

APIs, Accelerated

A high-quality CRUD API can require typing up a tedious amount of boilerplate code. The API standards, the ORM, the basic route handlers — there’s lots to do before you even have a running app to iterate on. Although code generation tools can help you get a leg up on the initial effort, they can add friction should you eventually need to modify all the generated output. By dynamically defining the backend at runtime, based on your data model, Hatchify solves the same problems as code generation without the friction of schema updates. Hatchify applications adapt to data model & library updates without having to revise all of the generated files.

In addition to saving you time on boilerplate, the API provided by Hatchify fully implements the JSON: API specification, which stipulates solid standards to define the peculiarities of CRUD REST APIs. Get back all the time spent bike-shedding how to implement standard API features like filtering, pagination, including related data, etc. JSON: API offers consistent practices for frontend and backend developers to agree on how resources are fetched and returned. Since Hatchify provides the core of your API for you, you can count on it’s standardized functionality to give your API a consistent start.

Data Modeling

To save all of this time, Hatchify depends on descriptions of the data it will be serving. This data model is written in a simple TypeScript format we call Schemas. Using those descriptions, Hatchify produces a starter application that your team can begin iterating on immediately. Schemas are consumed by the Hatchify ORM, HTTP router, and frontend elements, to configure themselves appropriately for the different resources held in your database.

For example, two schemas for a simple to-do list application:

From that business context, Hatchify can provide a fully functional API, a basic UI, and a React-hook interface to trivialize API access from React-based apps. The API features are showcased in the example below:

We can create an API for two different resources with the ability to:

Do basic CRUD
Use advanced filters
Query-related data in a single request
- Including normalization of related data
Query only for specified fields
Use page or offset/limit-based pagination

For a complete devo of the above capabilities, head to our demo on StackBlitz.

Now that you have the foundational CRUD structure managed, you can seamlessly transition to expanding your API capabilities with any custom endpoints you might need.

Flexibility First

If eventually you find your API requires functionality beyond what Hatchify can provide, our modular approach to building the framework allows you to continue using whatever portions make sense for your uses case. The ORM, HTTP router, request parsing/serialization can all be used independently. We designed Hatchify to provide enough functionality for most apps while providing an easy transition for those who eventually want more control.

Bitovi is committed to keeping Hatchify free and open-source. We believe good software should be accessible to everyone, and we’ll never charge you to use Hatchify.

Our team works to support Hatchify in all modern JS/TS web applications environments, and integrate with all application (meta)frameworks. We are currently working on integration guides for Next.js, Remix and Astro. Our goal is to maintain extensive guides on how we at Bitovi (and the community) have adapted Hatchify for different usages. If you are interested in how Hatchify might work with your existing or prospective web technology stack, say “hi!” in our Discord and we can investigate that together.

Leaving The Nest

Hatchify is taking flight and we’re excited for devs to get back all the time they were going to spend writing CRUD API boilerplate. Our current roadmap includes:

Schema-driven form builder to easily create and edit data
Authorization support
Data migrations
More documentation improvements & integration guides
If there’s something you’d like to see, let us know on Github!

We want to make every dev more efficient - writing schemas in the morning, and building the important parts of their app by lunch. We hope that you’ll be one of the first. Find out more:

Read our Getting Started Guide and API Docs
Get help and support on Bitovi’s Discord
Follow Bitovi on LinkedIn and Twitter

Thanks!

🐣 Nils & The Hatchify Team

Introducing Hatchify: Low-code libraries for React, Node, and Sequelize

Heather Stevens — Wed, 13 Mar 2024 18:50:01 +0000

We are pleased to announce Hatchify - a tool that helps developers build React, NodeJS, and Sequelize apps swiftly. Hatchify provides the speed of a low-code development while enabling complete customization in the patterns familiar to React and Node developers.

If you are starting a new project, check out our Getting Started Guide.

What is Hatchify and what does it do?

Hatchify is a collection of JavaScript libraries for the frontend and backend that takes a data schema and builds commonly needed functionality (like services and grids) while allowing customization later.

To use Hatchify, define your app's data schemas as follows:

const Schemas = {
  Todo: {
    attributes: {
      name: string({ required: true }),
      dueDate: dateonly(),
      ...
    },
    relationships: {
      user: belongsTo("User"),
    },
  }
  User: {
    attributes: {
      name: string({ required: true }),
    },
    relationships: {
      todos: hasMany("Todo"),
    },
  }
}

With a schema, Hatchify creates:

Sequelize object-relational-mapping (ORM) classes
Flexible REST services
Frontend models
Frontend components

The next sections detail how you’d use these parts.

Sequelize ORM classes

hatchifyKoa(schemas).orm.models provides Sequelize classes you can use to query and manipulate the database directly:

const hatchedKoa = hatchifyKoa(schemas);
const Todo = hatchedKoa.orm.models.Todo;

await Todo.getList({where: {name: "Learn Hatchify"}})

Access to the underlying ORM allows you to weave in custom behavior such as advanced validation, while still keeping the benefits of the rest of the toolchain.

Flexible REST services

hatchifyKoa(schemas).middleware provides a flexible and expressive REST API, letting you filter, paginate, sort, specify specific fields, and even include data across tables!

GET /api/todos
  ?include=user
  &fields[User]=name
  &filter[user.name][$ilike]=%Joe%
  &page[limit]=10
  &page[offset]=0
  &sort=dueDate

Frontend model layer

hatchifyReact(schema).model creates React data models and hooks, with full TypeScript support. The React data model can take advantage of filtering, relationships, and pagination - everything the service layer provides. The hooks also update automatically when there are changes (stale-while-revalidate for the win).

const [joesTodos, joesTodosState] = hatchedReact.model.Todo.useAll({
  include: ["user"],
  fields: { "User": ["name"] },
  filter: { "user.name": { $ilike: "Joe%" } },
  page: { limit: 10, offset: 0 },
  sort: ['dueDate'],
})

hatchifyReact(schema).components includes a data grid that supports filtering, pagination, and sorting.

The Hatchify team's next major step is adding components to create and edit data.

What problem is Hatchify solving?

Hatchify is trying to fill a gap between low-code solutions and CRUD generators.

The set-up of a new project can be complex and cumbersome. This gets in the way of agile development, where there is working software to review, adjust, and iterate from.

While there are many code generators and templates to bootstrap a new project, once you start customizing the app or updating the data model, you’re on your own. You have to make those customizations manually, often in multiple different places. You can’t keep experiencing the benefits of the code generator.

Therefore, Hatchify is trying to solve 3 problems simultaneously:

Enable rapid creation of prototype applications
Enable complete customization of the application
Continually providing value while customizing or adding new features.

This means Hatchify is not a code generator or a limiting low-code tool. Instead, it’s a bunch of libraries that you can use whole or in part to match your needs.

At the start of the project, a simple schema will provide you with a working app. An app where you can have conversations with the customer; and designers and developers can begin to iterate.

When you make changes, you can rewrite just the parts you need to change. The rest of the app can still be updated like a low-code tool.

Who is it for?

Hatchify is for products that:

Have CRUD-type behavior
Anticipate a lot of customization
Are built on NodeJS, REST, and React

Hatchify can’t fully compete with a low-code tool yet. You’ll have to build functionality like forms and authorization yourself. But, Hatchify provides a lot of value connecting (with strong TypeScript support) the frontend data layer all the way to the backend model layer and back:

Who is using it?

We’re using Hatchify at Bitovi for all new application development (where Node and React are the stack). We partnered with KlearTrust, a leader in Health IT, to develop Hatchify.

KlearTrust had a good understanding of their data model and needed to quickly validate their designs, while simultaneously building a production application. You can see the sortable and filterable Hatchify DataGrid below:

Using Hatchify, KlearTrust was able to accelerate its development of the full application, providing a straightforward UI (built atop the DataGrid) to manage a reasonably complex data model. You can see Andy Schriever, Senior Vice President of KlearTrust, share his thoughts on using Hatchify.

YouTube:

We’re hopeful you will check out Hatchify and find it as useful as KlearTrust has!

What’s next?

Our goal is to make Hatchify the swiftest way to build custom CRUD apps (or the swiftest way to build the CRUD elements of larger apps). Pending community feedback, we plan to add the following features immediately:

Forms to create and edit data
CRUD authorization support
Data migrations
Continued documentation improvements

If there’s something you’d like to see, let us know on Github!

To get started on Hatchify:

Read our Getting Started Guide and API Docs
Get help and support on Bitovi’s Discord
Follow Bitovi on LinkedIn and X for updates as they happen.

Thanks!

Hatchify Team

Web Accessibility Matters

Heather Stevens — Tue, 07 Nov 2023 17:12:25 +0000

Would you intentionally isolate 15% of your customer-base?

If you aren’t using accessibility best practices on your website - you’re doing exactly that.

15% of the population - roughly 1 billion people - according to the World Health Organization, are living with a disability. People with inhibited motor functions may use key strokes to get around online, rather than a mouse. Users who are visually impaired may use a screen reader. If a website doesn’t have accessibility built into their code, these tools are rendered useless.

What’s more, according to a 2021 PEW study, 23% of people with disabilities said they almost never go online. Why? Because the internet isn’t built with them in mind.

You might be thinking, but there are laws about accessibility compliance, right? While the Web Content Accessibility Guidelines (WCAG) and Section 508 have linked up to improve accessibility across the web, section 508 does not apply to private company’s websites, unless they receive federal funds or are under contract with a federal agency. This leaves nearly 90% of websites non-compliant with basic accessibility guidelines.

So how can we do better?

If you work in software, invest in resources for your devs to learn about accessibility standards and best practices.
You can view a free checklist of the WCAG guidelines.
Make accessibility an expectation from the start. This can save you time and money down the line and it ensures everyone who wants to access your site can do so successfully.
Avoid relying on AI & overlays. Most AI tools are works in progress and while there may be uses for them in the future, right now they aren’t as good as traditional, hard-coded accessibility methods.

Overlays claim to be quick tool for making your website WCAG compliant. Adding one line of code to your website sounds like a no brainer - don’t fall for the marketing. These overlays can conflict with screen readers, making it even more difficult for users with disabilities to navigate your site.

Haben Girma, a Disability Justice Lawyer, gives a wonderful overview of why relying on AI and overlays prevents people with disabilities from interacting with your site effectively.

Ask real users with disabilities to test your site. There is no substitute for asking people who depend on accessibility to let you know what works and what doesn’t.
Finally, if walking through resources and checklists alone feels overwhelming or you want more insight into the business value accessibility can give you-attend a free, virtual web accessibility training on Thursday, November 16th at 11am CT.

Will you and your company prioritize accessibility?

Docker 101: A Developer's Guide to Containerization & Beyond

Heather Stevens — Mon, 07 Aug 2023 17:22:16 +0000

In the midst of the ever changing landscape of software development, the need for efficient and reliable deployment processes has never been greater.

Developers are continually seeking tools that streamline the deployment workflow. Enter Docker—a powerful containerization platform that revolutionizes the way software is built, shipped, and executed. But in order to harness its power, we need to take a deep dive into Docker and explore what it does and how to use it.

Enter Bitovi’s Learn Docker training. In just two and a half hours you can go from interested to expert in one of the leading containerization tools available.

Now, let’s take a closer look at some of Docker’s key elements.

At its core, Docker is an open-source platform that enables developers to create, deploy, and manage applications in lightweight, self-sufficient containers. Unlike traditional virtual machines, containers don't require a full operating system, making them faster to start, lighter in terms of resource usage, and more portable across different environments.

To start using Docker, you must first install Docker on your machine. Docker provides comprehensive installation guides for various operating systems, such as Linux, macOS, and Windows. Once it’s installed, it’s time to start containerizing!

Docker is comprised of three technologies which make it possible to containerize and customize an application: Dockerfile, images, and containers.

A Dockerfile is a text file that contains instructions for building a Docker image. It defines the application's environment, installs dependencies, and sets up the necessary configurations.

Docker images are the building blocks of containers. An image is a collection of root filesystem changes and their execution parameters.

Containers are instances of Docker images that can be executed on any system running the Docker platform. A Docker container consists of a Docker image, an execution environment, and a set of standard instructions.

A Dockerfile and its subsequent images and containers define a standard way to ship software, ensuring consistency and reproducibility.

For developers working on multi-container applications, Docker Compose is a powerful tool. It allows defining and managing multi-container applications with a simple YAML file, automating the setup of complex environments.

With Docker, developers can streamline their development workflows, increase deployment efficiency, and foster collaboration between teams. Embracing containerization empowers software developers with the tools to create consistent and scalable environments across different stages of the application lifecycle. Mastering Docker enables a developer to elevate their DevOps skills and become more efficient overall.

Ready to Learn More?

Bitovi is a software consulting firm offering a free training on Docker!

Here's what you can expect from the training:

Look into Docker's architecture
Build a simple Node.js app to use throughout the course
Optimize an image for production
Streamline local development workflows
Form a full stack application using docker-compose

By the time we wrap, you'll have built a simple Node API and containerized it to run with Docker. No experience with Node or Docker is required!

Even if you are frontend focused, understanding Docker will make you a more efficient and well rounded dev.

Sound interesting? Find all the details and register (for free) here: https://www.bitovi.com/en/docker-training

Chicago JavaScript Meetup

Heather Stevens — Thu, 06 Jul 2023 17:43:27 +0000

In person Chicago meetup happening on Tuesday, July 18th at 5:30pm.

We're hosting a summer bash for Chicago-area devs interested in networking, eating pizza, and engaging with a technical talk on serverless, specifically geared towards JS devs. All levels of developers are always welcome.

The Details

Seasoned developer, Ross Gerbasi, is joining us in July to talk through the concept of Serverless from a JS developer's perspective - with a focus on Serverless Stacks.

We will look at how we got here, why Serverless technologies have become so popular as well as modern tools to help JS developers focus on getting their ideas out reliably and quickly. There is also a 90% chance of live coding with a 50% chance of success, so pretty good odds if you ask me.

The event will be held at 8th Light's offices at 25 E Washington St #509 on Tuesday, July 18th and starts at 5:30pm. Pizza, snacks, beer, and wine will be provided.

Come join us!

Read more details, join ChicagoJS, & RSVP to this meetup 👉 https://www.meetup.com/js-chi/events/288524148/

Build Components Without a Framework: What You Need To Know About Web Components

Heather Stevens — Mon, 05 Jun 2023 13:48:59 +0000

TLDR: Sometimes, we all need a little more flexibility. Web components are a set of APIs provided by modern web browsers that allow developers to create reusable UI components. Web components can be an advantageous technology to leverage because they are self-contained - meaning they don't rely on external libraries or frameworks. They also provide a way to encapsulate styles and behavior, making it easier to build and maintain complex UIs.

Why Web Components?

Let’s say your company’s website is already up and running- all you need to do is add a component or two. Maybe the site is built in a CMS like WordPress or Squarespace, and you want to jazz it up with JavaScript without overhauling the entire thing. What you want is a custom HTML tag, one that won’t interfere with the code that’s already there. This is where web components come in.

Web components allow for the encapsulation of CSS and JavaScript within a custom tag. That custom tag is reusable and framework agnostic, meaning once it’s built in vanilla JavaScript, you can tweak it and recycle it across a variety of projects.

A (Very) Brief History of Web Components

In 2011, Alex Russell, a then-senior software engineer at Google, gave a talk at the Fronteers Conference in Amsterdam. In that talk, Russell acknowledged the waning power of Internet Explorer and the rising popularity of Chrome and introduced web components.

In the beginning, using a web component required a polyfill—another technology that ensured cross-browser compatibility. And in 2013, Google created a stopgap with the web component library Polymer. This library was built to provide a set of features that made it easier and faster to create custom elements, as well as to assist developers with polyfill selection.

Now, however, browsers have native compatibility. Chrome and Safari developed native implementation of web components in 2016, Firefox followed in 2018, and Edge rounded out the pack in 2020.

Web components no longer require a polyfill to work in any major browser, making them an excellent way to build reusable components in JavaScript. Polymer is now in maintenance mode (although YouTube still relies on it heavily), and Lit is the preferred library for building web components, among myriad other options.

The Battle Between Frameworks & Web Components

Web components sound great and all, but don’t frameworks do all the componentization for me?

Over the last twenty years, JavaScript frameworks like Angular, React, Vue, and Svelte have paved the way for component-based development, making it easier to build organized, scalable applications. While web components fought for native browser compatibility, JavaScript frameworks made component-based architecture more seamless than ever. As a result, entire ecosystems were built around JavaScript frameworks.

But web components haven’t disappeared. They’re in use on sites such as Salesforce, GitHub, Google Play, and YouTube. YouTube is built almost entirely with web components because of the site’s heavy user interactivity and complexity. Web components help ensure YouTube has fast runtimes because, when built on top of browser APIs and web standards, the JavaScript footprint of the design system is way lighter—which is key for site performance.

Web components are also more versatile than frameworks. Not only are they interchangeable between frameworks because of their compatibility with a variety of tech stacks, but they also offer cross-platform development and ensure brand consistency. Since web components focus on doing a singular function well, they allow us to break up a complex web app into reusable pieces that will look and function the same.

Web components can be used in one-off circumstances to spruce up an existing website—adding a banner, an interactive checklist, or an audio player. But they can also be used to build entire websites. So while frameworks need JavaScript, JavaScript doesn’t need frameworks.

The Technical Stuff

Web components are custom HTML elements with dedicated UI, style, and logic. They utilize a set of technologies to create a standard component model, which lays the foundation for the encapsulation and interoperability of components. In short, web components combine the simplicity of HTML with the power of JavaScript.

Web components are a mix of four web standards: custom elements, shadow DOM, ES modules, and HTML templates.

Custom elements make it possible to create new tags by extending HTML and attributing unique style and logic only to that new element.

The shadow DOM keeps web component attributes segmented from the main DOM. The shadow DOM hides the internal markup of the component from other scripts, meaning global CSS and JavaScript will not affect the element. This technology makes web components reusable, enhancing the value of a well-constructed web component. The shadow DOM is also optional. While the technology is available to protect your web component from global styles, it isn’t required, so if you’re looking for the web component to inherit styles from your CSS, that option is still on the table.

ES modules are a function of JavaScript itself and have contributed to the usability of web components across browsers. This technology provides a mechanism for splitting up JavaScript programs into separate modules that can be imported when needed.

The HTML template tag is used to populate the shadow DOM of a web component. The template tag can be id-ed with your web components' name and content, and style can be added directly between the opening and closing template tag. This ensures that the contents of the template tag are hidden from the DOM and will only be rendered when called on by JavaScript.

The Wrap Up

With their versatility and lightweight nature, web components are an important tool to have in your developer toolbox - so don’t forget about them.

Ready to Learn More?

Bitovi is a software consulting firm offering a free training on web components!

We’ll cover the basics of web components, including how to create custom elements, how to use templates to define the structure of your components, and how to use events to communicate between components. We’ll also delve into more advanced topics like using Shadow DOM to encapsulate styles and using slots to allow for more flexible content.

This is a great resource for anyone looking to learn about web components and level up their frontend development skills.

Sound interesting? Find all the details and register (for free) here: https://www.meetup.com/js-chi/events/293573432/?_xtd=gatlbWFpbF9jbGlja9oAJGE3NTcxMGQwLTU2ZjMtNDM2NS05NWFhLTk1ZmRlYmZmZmZlMQ%253D%253D

Data Reveals Interesting New Insight Into How Leadership Styles Impact the Quality of Projects

Heather Stevens — Mon, 14 Nov 2022 19:58:11 +0000

Join us on December 7th at 11am CT as we discuss a modernized approach to technical project management. We'll breakdown the do’s and do not's with three experienced developers and team leads.

DevOps Webinar: Let's Talk Pipeline Runners

Heather Stevens — Tue, 18 Oct 2022 13:50:43 +0000

📌Join DevOps experts on November 2nd at 11am CT to discuss the tools they're using and weigh the pros and cons of the most popular Pipeline Runners available.

👉 Be sure your seat is saved! https://my.demio.com/ref/P1vnTtR1cOvEHVTz

Seeking Speakers for virtual ChicagoJS Meetup

Heather Stevens — Wed, 12 Oct 2022 20:29:19 +0000

Chicago JavaScript meetup is looking for speakers!

If you have a talk related to any JavaScript framework, tools, or techniques, we would love to hear from you. Giving a talk is a great opportunity to help others, find friends with similar interests, get hired and get selected as a speaker at world-class conferences.

What

We focus on JavaScript themes for presentations, but the subject of the talk is up to you!
Potential topics might include:

GraphQL
Webpack
Front-end workflow
React/Redux/Redux-saga
Typescript
Angular 5
Progressive web app
JavaScript performance
npm vs yarn vs Turbo to package your app
Functional programming in JS
JavaScript app architecture
Vue JS

Where

Virtual! Speak from the comfort of your own home.

When

The second to last Tuesday of each month from 5:30pm - 6:30pm CT

Upcoming Dates: November 15, 2022 - December 13, 2022

To check out a full list of our upcoming meetups, visit us https://www.meetup.com/js-chi/events/

DEV Community: Heather Stevens

Hatchify: The Fastest Way to Build JSON: APIs

APIs, Accelerated

Data Modeling

Flexibility First

Leaving The Nest

Introducing Hatchify: Low-code libraries for React, Node, and Sequelize

What is Hatchify and what does it do?

Sequelize ORM classes

Flexible REST services

Frontend model layer

What problem is Hatchify solving?

Who is it for?

Who is using it?

What’s next?

Web Accessibility Matters

Docker 101: A Developer's Guide to Containerization & Beyond

Ready to Learn More?

Chicago JavaScript Meetup

In person Chicago meetup happening on Tuesday, July 18th at 5:30pm.

The Details

Build Components Without a Framework: What You Need To Know About Web Components

Why Web Components?

A (Very) Brief History of Web Components

The Battle Between Frameworks & Web Components

The Technical Stuff

The Wrap Up

Ready to Learn More?

Data Reveals Interesting New Insight Into How Leadership Styles Impact the Quality of Projects

DevOps Webinar: Let's Talk Pipeline Runners

Seeking Speakers for *virtual* ChicagoJS Meetup

Chicago JavaScript meetup is looking for speakers!

What

Where

When

Seeking Speakers for virtual ChicagoJS Meetup