Discover the power of htmx, a JavaScript library that simplifies server communication for Monaca app development, eliminating the need for complex JavaScript code. This article provides simple code examples to guide you through utilizing htmx effectively.

When creating a Monaca app, communication with the server is essential. During this process, a technique known as Ajax is commonly used to send requests to the server and update the screen based on the received response.

Writing such processes can be very tedious and complicated. This is where htmx comes in. htmx is a library that enables communication with the server without the need to write any JavaScript code.

In this article, we will introduce how to use htmx with simple code examples.

As mentioned earlier, htmx is a library that allows you to achieve network communication and advanced UX without writing JavaScript.

htmx enables direct access to AJAX, CSS transitions, WebSockets, and server-sent events within HTML using attributes on HTML tags.

By using htmx, you can avoid the hassle of writing repetitive JavaScript code and let htmx handle everything for you, including error handling.

There are several ways to install htmx. The first and easiest one is to use a CDN.

&lt;script src="https://unpkg.com/htmx.org@1.8.6" integrity="sha384-Bj8qm/6B+71E6FQSySofJOUjA/gq330vEqjFx9LakWybUySyI1IQHwPtbTU7bNwx" crossorigin="anonymous"&gt;&lt;/script&gt;

The second method is to download a JavaScript file distributed by CDN and load it in the application.

&lt;script src="js/htmx.min.js"&gt;&lt;/script&gt;

Let’s consider the scenario of writing Ajax code using htmx. Typically, it would be written as follows. We will simplify it for this example, but in reality, it can become more complex with request payload creation and authentication.

The following code utilizes the service “JSONPlaceholder” as a demo server.

JSONPlaceholder is a free online REST API that provides dummy JSON data. It allows you to perform operations such as GET, POST, PUT, PATCH, and DELETE, making it useful for testing and prototyping purposes.

&lt;a href=”#” onclick=”ajax”&gt;click&lt;/a&gt;
&lt;div id=”result”&gt;Result&lt;/div&gt;
&lt;script&gt;
  async function ajax() {
  const result = document.querySelector(“#result”);
    try {
      const res = await fetch(“https://jsonplaceholder.typicode.com/todos/1");
      result.innerHTML = await res.text();
    } catch (e) {
      result.innerHTML = e.message;
    }
  }
&lt;/script&gt;

When writing this process with htmx, it would look as follows. You don’t need to write any JavaScript code; you can simply specify it using HTML tag attributes.

&lt;a href="#" hx-get="https://jsonplaceholder.typicode.com/todos/1" hx-trigger="click" hx-target="#result"&gt;
  Click here to load content
&lt;/a&gt;
&lt;div id="result"&gt;Loading…&lt;/div&gt;

This is an example of server communication. htmx supports the HTTP GET/POST/PUT/PATCH/DELETE methods.

In the following example, when you click on the div tag, it sends a PUT request to /messages and updates the content of the div tag with the received response.

&lt;div hx-put="/messages"&gt;
  Put To Messages
&lt;/div&gt;

By utilizing htmx, it is possible to update only the content within the `&lt;body&gt;` tag without reloading the entire HTML page. This functionality is similar to Hotwire, which is used in conjunction with Ruby on Rails. With this feature, traditional websites can evolve to have interactivity similar to that of a Single-Page Application (SPA).

To efficiently perform this process, it is recommended to specify `hx-push-url=”true”`. This enables the use of the History API, allowing dynamic rewriting of the URL and enabling features such as dynamically changing the URL and utilizing the browser’s back button.

By including `hx-push-url=”true”`, htmx makes it possible to leverage the History API, which provides seamless URL updates based on the changes made to the content. This allows for a more efficient and user-friendly browsing experience, including the ability to navigate using the browser’s back button.

&lt;div hx-boost="true"&gt;
  &lt;a hx-get="/blog" hx-push-url="true"&gt;Blog&lt;/a&gt;
&lt;/div&gt;

<b>Communication with servers: Use of Ajax, SSE, and WebSockets</b>

By using htmx, you have more options for server communication beyond just Ajax. It also supports Server-Sent Events (SSE) and WebSocket as communication methods.

For example, when implementing a message receiving feature like a chat, you can use the following code:

&lt;div hx-ws="connect:wss:/chatroom"&gt;
  &lt;div id="chat_room"&gt;
  …
  &lt;/div&gt;
  &lt;form hx-ws="send:submit"&gt;
  &lt;input name="chat_message"&gt;
  &lt;/form&gt;
&lt;/div&gt;

In this example, hx-ws=connect: is used to specify the WebSocket server’s connection endpoint, and hx-ws=send: is used to set the information for sending messages.

Additionally, by using SSE, it is possible to receive one-way messages from the server. Unlike WebSocket, SSE only allows messages to be sent from the server. You can describe it as follows:

&lt;body hx-sse="connect:/news_updates"&gt;
  &lt;div hx-trigger="sse:new_news" hx-get="/news"&gt;&lt;/div&gt;
&lt;/body&gt;

These pieces of code perform dynamic content updates without reloading the page.

In htmx, several default event triggers are preconfigured. They are as follows:

If you want to set a trigger for events other than the above, you can use the hx-trigger attribute to specify it. For example, you can trigger the mouse enter event with the following code:

&lt;div hx-post="/mouse_entered" hx-trigger="mouseenter"&gt;
  [Here Mouse, Mouse!]
&lt;/div&gt;

This code sends a POST request to “/mouse_entered” when the mouse enters a specific element (on the occurrence of the mouseenter event). This allows the web page to dynamically respond to user actions and provides a better user experience.

In htmx, it is generally recommended to use the HTML5 Validation API for form validation. However, there may be cases where you want to implement custom validation.In such cases, although a bit more complex, you can perform input validation using JavaScript-like syntax within htmx.

&lt;form hx-post="/test"&gt;
  &lt;input _="on htmx:validation:validate
  if my.value != "foo"
    call me.setCustomValidity("Please enter the value foo")
  else
    call me.setCustomValidity("")"
  name="example"
  &gt;
&lt;/form&gt;

In htmx, you can specify how to rewrite the content, and by default, the innerHTML method is used. Rewriting methods can be specified using the hx-swap attribute. Here are some options:

&lt;button hx-post="/clicked"
  hx-trigger="click"
  hx-target="#parent-div"
  hx-swap="outerHTML"
&gt;
  Click Me!
&lt;/button&gt;

htmx has a mechanism called extensions. You can create your own extensions using the element hx-ext. These extensions are written in JavaScript, and you can find a variety of extensions at &lt;/&gt; htmx-Extensions. Here we showcase how to create an extension.

First, define the extension in JavaScript.

htmx.defineExtension("my-ext", {
  onEvent : function(name, evt) {
    console.log("Fired event: " + name, evt);
  }
});

This extension can now be used in &lt;div hx-ext=”my-ext” /&gt;.

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Design Patterns</h2></div>

Up to this point, you should be familiar with the basic concepts and usage of htmx. Now let’s see how it can be used in practical scenarios. It can be effective in the cases when most of the data resides on the server and there is no need to manage state on the client side.

htmx is not necessarily suitable for complex Ajax processing. Instead, it is ideal for simple tasks such as sending information from a form and presenting the results in the user interface (UI). It is well-suited for applications where the server-side handles the request and response processing, and the client-side only displays the results.

<b>2. Converting Existing Websites to Single-Page Applications (SPAs)</b>

By leveraging htmx’s boost feature, it is possible to update the entire body section of the currently displayed HTML. This reduces the number of JavaScript and CSS file loads and efficiently achieves a user experience similar to web applications. This approach is particularly useful when the server-side holds most of the content, and the client-side is responsible for displaying it.

<b>3. Implementing Chat Functionality</b>

Since htmx supports WebSocket, it can be used to implement simple chat applications. This is especially suitable for applications where chatting is not the main functionality but they include chat features.

From the examples above, it is evident that htmx can be a valuable tool in various scenarios of web development by harnessing its unique characteristics. Understanding the efficient usage of htmx and applying it to your own projects will be beneficial.

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Summary</h2></div>

In this article, we introduced the overview of the htmx library. With htmx, you can achieve Ajax functionality without relying on JavaScript, enabling you to create dynamic Monaca apps even if you are not proficient in programming.

We encourage you to master htmx and create exceptional UI/UX designs.

htmx: Achieving server communication without JavaScript

ChatGPT's rapid growth since late 2022 has led to its integration into diverse services, generating interest and speculation about its impact on mobile app development.

Since late 2022, ChatGPT has rapidly gained traction. Numerous services utilizing ChatGPT have emerged, attracting attention from many interested parties. In this article, we will discuss the impact and changes that ChatGPT brings to mobile app development. This includes a significant amount of speculation, so please be aware that there’s a high likelihood of being off the mark.

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Potential uses of ChatGPT</h2></div>

From a programmer’s (app developer’s) point of view, there are several possible ways to utilize ChatGPT:

This has already been implemented in GitHub Copilot (based on OpenAI Codex provided by OpenAI, the developer of ChatGPT). It offers code suggestions when you’re writing code, a feature distinct from code completion. Code completion involves statically analyzing the code and completing class methods or variable names.

On the other hand, code suggestion analyzes the code and proposes the predicted next steps. For instance, when you write code to process one property among several, it suggests additional code for handling the other properties. The programmer simply reviews the content and presses the tab key to complete programming. It’s also handy to have the capability of completing function names. While comments are also useful, GitHub Copilot can predict and write the code based on the function name. The CEO of GitHub has stated that eventually, 80% of the code will be AI-based. Having experienced GitHub Copilot and ChatGPT, you might feel that this prediction isn’t far off.

ChatGPT is frequently used to review written code. By submitting your finished code to ChatGPT for review, it can refine the code to increase its readability or add comments. It’s not just a review but a generation of improved code. Comparing this revised code to the original can help you understand what constitutes better code. If you’re waiting hours to days for a code review, having ChatGPT do it quickly is more convenient.

ChatGPT can generate unit test code or browser test code based on the finished code. Writing test code can be burdensome, but having it auto-generated makes the task considerably easier. Even if it’s only the test code for the standard operation, having a base greatly reduces the time required. This test code generation also takes into consideration the analysis of the original code, essentially producing optimized test code for your code. This provides a significantly different experience from finding test code base online and having to write it yourself.

<b>Teaching how to use libraries or APIs</b>

ChatGPT is a handy tool when you need to understand the use of APIs or libraries that you rarely use. Of course, you can read the documentation to figure out the usage, but it may not necessarily fit your specific needs. Understanding the documentation and customizing the exemplified code to meet your needs can be required.

In the case of ChatGPT, it generates optimized code in accordance with the requirements of your questions. Try using it to learn how to use mapping libraries or Canvas, and you’ll surely appreciate its astonishing capabilities.

There is a service called GPTApp that has already been released. This displays the content asked from ChatGPT as a web application. If the requirements (prompts) are correct, the application will be generated as desired.

One interesting point about this usage is that it can automatically generate tutorial-like applications. Monaca has various demo apps and tutorials prepared, but it will be possible for users to generate what they expected originally. The content you wondered “how to create such an app” will be deployed as an app.

Of course, vague requirements will not result in the expected output. This is called prompt engineering, and the ability to make correct requests to ChatGPT is required.

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Future Changes</h2></div>

Please note that what follows contains much speculation.

<b>Free Selection and Generation of the Base</b>

When developing an app so far, you would have selected a template, for instance, content like Vue.js and Tailwind. It seems that the generation of such base apps will become freely feasible.

For example, you might be able to freely generate an app just by selecting things like Vue.js for the framework, Tailwind for the CSS framework, and a tab view for the screen. The reason for the selection style is to improve precision more easily than free text input.

<b>Creation of Backend Architecture from Requirements</b>

By inputting the requirements of the project, it might suggest the backend architecture of the app and generate the necessary code. It may guide you on how to use Nifcloud mobile backend or Firebase as mBaaS, and it may also output code for AWS CloudFormation.

Similarly, it may suggest the structure of the database and output SQL.

If GitHub Copilot or the next-generation GitHub Copilot X is used, it will become standard to use generated code rather than writing it. The issue here is that the programmer is responsible for the generated code. You can’t blame GitHub Copilot if there’s a bug. Whether it works correctly or not, the programmer needs to check and approve.

Therefore, as a programmer, you will need the knowledge of code reading and the skill to correct it when it’s wrong. Of course, the skill to correct can only be acquired by actually writing code. Just because automatic generation has become standard, it doesn’t mean that you can have low skills as a programmer. Rather, the skill to discern whether code that seems fine is really okay is needed. This will become an eye as a reviewer, so the skill must be even higher.

In order to have the AI generate the code you expect, prompt engineering skills are required. You need to correctly judge the requirements of the app and put them into sentences.

However, you are not writing sentences like programming. A level of writing skills that does not cause discrepancies in AI recognition will be required.

To improve prompt engineering skills, you first need to touch the current AI and learn what kind of results you get from the kind of sentences you are inputting.

While I think this will change in the future, with the current AI, it is basic to generate one screen’s worth of code in one prompt. To create an app that spans multiple screens, the prompts and responses become too long.

Therefore, you will need the technology to output the code for each screen and connect it to make an app. Care must be taken to ensure that discrepancies do not occur between screens. For example, if the main screen is Vue.js and the list screen is React, the app will be difficult to develop. Prompt skills are important to avoid such problems.

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Conclusion</h2></div>

ChatGPT has great potential not only in development but also in website documentation, help, and marketing. In other words, it will become an unmissable existence even for people other than programmers.

ChatGPT is already integrated into many services and is being used experimentally within companies. This could be close to the impact smartphones had when they were introduced. Around 2008, many smartphone-related services were launched and the way to connect them to business should have been considered internally. This could be a reoccurrence of that.

Try it out first and explore the possibilities.

Embracing the Future: Navigating the Shift in App Development Trends Driven by AI Innovation

Learn how to create a hybrid digital album using Monaca, React, Firebase, and Framework7, allowing users to share, edit, and view pictures among groups in a comprehensive way, regardless of their operating system.

Social media have introduced the ability to share pictures of personal moments to the whole world. Everyone is able to see those pictures, or more specifically, everyone that <i>follows</i> us or is our <i>friend</i> on a specific social platform. But what if we want to share pictures among a group of people that we went on a trip together and now our gallery is flooded with pictures of them? What we usually do is share those pictures through messaging apps, Bluetooth or Airdrop. As convenient as these tools can be, they don’t provide the full experience of sharing and viewing these pictures as a shared digital album would provide.

This tutorial gives guidance to develop exactly that, a digital album where users can share pictures among groups (networks of other users), edit them and view them. It’s a hybrid application, meaning that it can be supported by both&nbsp;<b>Android</b>&nbsp;and&nbsp;<b>iOS</b>&nbsp;operating systems. The tools used for the development are; Monaca, React, Firebase and Framework7. This tutorial will provide information only on the logic behind the application. The files related to the styling and the UI can be found in the GitHub repo&nbsp;<a href="https://github.com/monaca-samples/SIA" rel="noopener ugc nofollow" target="_blank">here</a>.

The tutorial is split into two parts. You can find the second part&nbsp;<a rel="noopener" href="https://medium.com/@hadjichristodoulou_athina/create-a-shared-digital-albums-hybrid-application-with-monaca-firebase-framework7-and-react-part-23cb418499d4">here</a>.

<i>Note: Take into consideration that this application is a sample and it provides some basic functionalities. It of course can be extended to support many more functionalities and you are very welcome to do so. This project and this tutorial have been created in order to show the possibilities of the tools used to develop the application.</i>

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Technologies Used</h2></div>

Before diving into the process of development, let’s take a look at the technologies used for this project.

<b>Monaca</b>&nbsp;is a cloud-based platform for developing and deploying hybrid mobile apps. It provides a set of tools and services for building cross-platform mobile applications using web technologies such as HTML5, CSS, and JavaScript. It also provides a cloud-based build service that allows developers to build and distribute their apps to app stores without the need to setup their own infrastructure.

<b>Firebase</b>&nbsp;provides a comprehensive platform for developers to build, test, and deploy their applications quickly and easily, without the need for managing infrastructure or backend services. From the Firebase platform we will be using Firebase authentication to authenticate users, Firestore database to store data and Cloud Storage to store pictures.

<b>Framework7 for React</b>&nbsp;is a mobile-first UI framework for building cross-platform mobile applications using React. It provides a set of components and tools that make it easy to create native-looking mobile applications with a seamless user experience.

<i>Technologies used for the development of the application</i>

Before starting the development of a project, a good practice is to create a wireframe that depicts how the application should look like and what functionalities it provides in which parts.&nbsp;<a href="https://www.figma.com/file/4xRBkU46KqRYsvGq6xotyo/SIA?node-id=0%3A1&amp;t=UmCLrmRXfx024YGl-1" rel="noopener ugc nofollow" target="_blank">Here</a>&nbsp;you can find the wireframe I created for this project with the help of&nbsp;<b>Figma</b>.

<div class="ce-header-block cdx-block style_ce-header-block-container__W8eT8"><h2 class="header" contenteditable="true">Setting up the project</h2></div>

There are two ways we can start the development of our project, either locally with our favorite text editor or with the cloud IDE provided by&nbsp;<b>Monaca</b>. Both options will produce the same result so the decision depends on our own personal preference.

<a href="https://medium.com/the-web-tub/create-a-shared-digital-albums-hybrid-application-with-monaca-firebase-framework7-and-react-a33932a0c0fe">Continue reading on The Web Tub &gt;</a>

Create a Shared Digital Albums Hybrid Application with Monaca, Firebase, Framework7 and React

Monaca Cloud IDE is now supporting Xcode 14.2.0 for iOS app builds

We have started supporting Xcode 14.2.0 for iOS app builds. You can use the following steps for the latest project (Cordova 11).

Please note that iOS simulator builds are only supported on ARM architecture. Therefore, simulator builds on unsupported architectures cannot be performed.

1. From the Monaca Cloud IDE menu, select "Build" → "Build Environment Settings".

3.&nbsp;After configuring the Xcode version, click the “Save” button. The settings will be saved for each project.

Once the settings are saved, building the iOS app will use Xcode 14.2.0 for the app build.

Latest news from Asial

htmx: Achieving server communication without JavaScript

Embracing the Future: Navigating the Shift in App Development Trends Driven by AI Innovation

Create a Shared Digital Albums Hybrid Application with Monaca, Firebase, Framework7 and React

Support Xcode 14.2.0

Previous

1

Next

Company

Industries

Solutions