Cliently

cliently

gRPC-Secret: Mastering Deadlines, Timeouts, and Custom Contexts

gRPC-সিক্রেট: সময়সীমা, সময়সীমা, এবং কাস্টম প্রসঙ্গ আয়ত্ত করা

gRPC-Geheimnis: Deadlines, Timeouts und benutzerdefinierte Kontexte meistern

gRPC-Secret: Dominar los plazos, los tiempos de espera y los contextos personalizados

gRPC-Secret : maîtriser les délais, les délais d'attente et les contextes personnalisés

gRPC-सीक्रेट: डेडलाइन, टाइमआउट और कस्टम संदर्भों पर महारत हासिल करना

gRPC-Secret: 期限、タイムアウト、カスタムコンテキストをマスターする

gRPC 비밀: 기한, 시간 초과, 사용자 정의 컨텍스트 마스터하기

gRPC-Secret: dominando prazos, tempos limite e contextos personalizados

gRPC-Secret: освоение сроков, тайм-аутов и пользовательских контекстов

gRPC-Secret: Son Teslim Tarihleri, Zaman Aşımları ve Özel Bağlamlarda Uzmanlaşma

gRPC-Secret: Nắm vững thời hạn, thời gian chờ và bối cảnh tùy chỉnh

gRPC 秘密：掌握截止期限、超时和自定义上下文

Effortlessly Launch LangChain APIs with LangServe and MinIO Integration

অনায়াসে LangServe এবং MinIO ইন্টিগ্রেশন সহ LangChain API চালু করুন

Müheloses Starten von LangChain-APIs mit LangServe- und MinIO-Integration

Lance las API de LangChain sin esfuerzo con la integración de LangServe y MinIO

Lancez sans effort les API LangChain avec l'intégration LangServe et MinIO

LangServe और MinIO एकीकरण के साथ LangChain API को आसानी से लॉन्च करें

LangServe と MinIO の統合により LangChain API を簡単に起動

LangServe 및 MinIO 통합을 통해 LangChain API를 손쉽게 실행

Inicie APIs LangChain sem esforço com integração LangServe e MinIO

Легко запускайте API-интерфейсы LangChain с интеграцией LangServe и MinIO.

LangServe ve MinIO Entegrasyonu ile LangChain API'lerini Zahmetsizce Başlatın

Dễ dàng khởi chạy API LangChain với tích hợp LangServe và MinIO

通过 LangServe 和 MinIO 集成轻松启动 LangChain API

Everybody wants to access web apps from their mobile phone and that’s why developers must create their React apps in a mobile-first fashion. There are multiple problems when comes to building apps for various devices such as many display resolutions, screen orientation, and touch events. Today, I’ll show you how to handle touch events in like a pro without any NPM libraries. Obviously, libraries can make your lives easier but did you know it only takes 50 lines of code to create your own component to handle mobile swipe events? I will teach you how to do so. React As always, my articles are based on the problems I was solving in real life. Recently I decided to migrate my version of the 2048 Game to Next.js and React 18 and this inspired me to rethink some parts of the initial design. To eliminate confusion, I will only focus on handling touch events in React and show you the best practices when comes to creating React apps that support mobile devices. open-source If you are intrigued by how to build the 2048 game from scratch, you should consider enrolling to my React course on Udemy. Link below. I will walk you through the entire process of creating the 2048 Game with animations. In the end, learning should bring us joy and fulfillment and nothing is more satisfying than making a complete game from scratch. Quick intro In early 2020, I released the very first version of my 2048 game. I wrote a short article describing my decision process and why I designed my code in a different way than other open-source versions. Immediately my article went viral on Reddit and FreeCodeCamp since it completely changed the perspective on this problem. My implementation was different than others because it supported mobile devices and had awesome animations. Other open source implementations of 2048 in React were janky and incomplete. Despite my efforts, the initial version wasn’t perfect and that’s why I decided to refresh it. I updated it to React 18, changed the build process by migrating it to Next.js, and rewrote styles from LESS to classic CSS. Still, I wasn’t happy about the fact I used a lot of NPM libraries - especially libraries responsible for dealing with mobile touch events. I used a library called and it was perfect to support multi-gesture touch events in JavaScript. Unfortunately, doesn’t support React and it forced me to create my own React wrapper for this library. But I found yet another problem - the NPM library hadn’t been updated for the last 8 years and it puzzled me. is downloaded more than 1.4 million times weekly but nobody is maintaining it. hammerjs hammerjs hammerjs Technically, my project wasn’t critical so I still could take advantage of this library. I always prioritize high quality of code but usage of unmaintained library cannot be considered as good practice. That’s why I created my component from scratch. Custom React Component - MobileSwiper I decided to call this component and declared two props as its arguments – and : MobileSwiper children onSwipe export default function MobileSwiper({ children, onSwipe }) {
	return null   
} Let me briefly explain them: allow me to inject any HTML elements inside this component. children is a callback that will be triggered each time user swipes within a given area. In my case, I want to enable mobile swipes on the game board only. All other parts of app should be scrollable. onSwipe To detect the swipeable area I created a reference to the DOM element. Basically, only this element will allow custom touch events. I did it by using the hook, and using it to reference a element: useRef div import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)

    return <div ref={wrapperRef}>{children}</div>
} Once I declared the area I was ready to focus on handling swipes. The easiest way to detect them is by comparing the starting and ending positions of the user's finger. This means I needed to store the initial position of the user's finger in state ( and coordinates) and compare it with the last known finger position (before the user lifts the finger off their screen): x y import { useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

    return <div ref={wrapperRef}>{children}</div>
} Then I was ready to implement finger tracking, I created two callbacks using standard JavaScript touch events: used to set the starting position of the user's finger. handleTouchStart handling the final position of the user's finger and calculating the shift (delta) from the starting point. handleTouchEnd Let's look into the event handler first: handleTouchStart import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
  	}, [])
    
    return <div ref={wrapperRef}>{children}</div>
} Let me explain it: I wrapped this helper into the hook to improve the performance (caching). useCallback The statement checks if user is swiping within a declared area. If they do it outside of it,  the event will not be triggered and user will simply scroll the application. if disables the default scrolling event. e.preventDefault() The last two lines store and coordinates in state. x y Now let's focus the event handler: handleTouchEnd import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
    }, [])
    
  	const handleTouchEnd = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }
        
        e.preventDefault()
        
        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY
        
        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])
    
    return <div ref={wrapperRef}>{children}</div>
} As you can see, I’m taking the final and coordinates of user's finger and deduct the starting and coordinates from the final ones. Thanks to that I am able to calculate horizontal and vertical shift of the finger (aka deltas). x y x y Then I passed calculated deltas onto the callback which will be coming from other components to promote reusability. PS. If you remember, I declared the callback in the component's props. onSwipe onSwipe In the end, I needed to take advantage of created event callbacks and hook them into the event listener: import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	const wrapperRef = useRef(null)
	const [startX, setStartX] = useState(0)
	const [startY, setStartY] = useState(0)    

	const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
      		return
    	}

    	e.preventDefault()

	    setStartX(e.touches[0].clientX)
    	setStartY(e.touches[0].clientY)
  	}, [])
    
  	const handleTouchEnd = useCallback(
    (e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }
        
        e.preventDefault()
        
        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY
        
        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])   
    
 	useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart)
        window.addEventListener("touchend", handleTouchEnd)
        
        return () => {
            window.removeEventListener("touchstart", handleTouchStart)
            window.removeEventListener("touchend", handleTouchEnd)
        }
  	}, [handleTouchStart, handleTouchEnd])
    
    return <div ref={wrapperRef}>{children}</div>
} Let’s use it The component is ready now and I can use it with my other components. As I mentioned at the beginning, I created this component to handle mobile swipes on the game board of my 2048 Game, and that’s where this example code comes from. MobileSwiper If you want to use it in your project feel free to copy & paste the function and hook it as I did it on the game board: handleSwipe import { useCallback, useContext, useEffect, useRef } from "react"
import { Tile as TileModel } from "@/models/tile"
import styles from "@/styles/board.module.css"
import Tile from "./tile"
import { GameContext } from "@/context/game-context"
import MobileSwiper from "./mobile-swiper"

export default function Board() {
	const { getTiles, moveTiles, startGame } = useContext(GameContext);
	
    // ... removed irrelevant parts ...
    
    const handleSwipe = useCallback(({ deltaX, deltaY }) => {
    	if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
            	moveTiles("move_right")
            } else {
            	moveTiles("move_left")
            }
        } else {
            if (deltaY > 0) {
                moveTiles("move_down")
            } else {
                moveTiles("move_up")
            }
        }
    }, [moveTiles])

 	// ... removed irrelevant parts ...

	return (
    	<MobileSwiper onSwipe={handleSwipe}>
      		<div className={styles.board}>
        		<div className={styles.tiles}>{renderTiles()}</div>
        		<div className={styles.grid}>{renderGrid()}</div>
      		</div>
    	</MobileSwiper>
  	)
} Let's focus on the handler first. As you can see, I‘m comparing if is greater than to estimate if the user swiped horizontally (left/right) or vertically (top/bottom). handleSwipe deltaX deltaY If it was a horizontal swipe, then: negative means they swiped to the left. deltaX positive means they swiped to the right. deltaX If it was a vertical swipe, then: negative means they swiped up. deltaY positive means they swiped down. deltaY Now, let's move on to the statement of the Board component. As you can see, here’s where my custom MobileSwiper component comes into play. I am passing the helper to the property, and wrapping the HTML code of the game board to enable swiping on it. return handleSwipe onSwipe It works but unfortunately, the result isn't perfect - scrolling events are mixed up with swipes: This is happening because modern browsers use passive event listeners to improve the scrolling experience on mobile devices. it means that the I added that event handlers never take effect. preventDefault To fix scrolling behavior, I disabled passive listeners on the component by setting flag to : MobileSwiper passive false import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
	// ... removed to improve visibility ...
    
 	useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart, { passive: false })
        window.addEventListener("touchend", handleTouchEnd, { passive: false })
        // ... removed to improve visibility ...
  	}, [handleTouchStart, handleTouchEnd])
    
	// ... removed to improve visibility ...
} Now the scrolling behavior is gone and my 2048 Game works like a charm: Conclusion I am not against using libraries because they can speed up your work but sometimes you can build your custom solution in 50 lines of code just like I showed you today. That’s why i believe that you don’t need any library to handle mobile events in React. Wanna learn more tricks like this one? If you wish to learn more React tricks like this one, or simply you want to say ‘thank you’, consider joining my course on Udemy where I will teach you how to . You will not only learn clever tricks like that one but also find solutions to the most common mistakes that React developers make. create the 2048 game in React (special discount for HackerNoon readers) 🧑‍🎓 Join React 18 course on Udemy Believe it or not, this is the most up-to-date React 18 and Next.js course on Udemy. I released in January 2024 and I’ll keep updating it.

You Don't Need NPM Libraries To Handle Mobile Events

**ZUG, Switzerland, October 17th, 2024/Chainwire/--**Most zero-knowledge proofs are generated server-side for scaling, but Aleph Zero’s zkOS does that directly on users’ devices, offering privacy in a fraction of second. Aleph Zero, the leading blockchain platform recognized for its focus on privacy and scalability, announces the launch of the first feature of zkOS (zero-knowledge operating system)—Shielding, on its EVM Testnet. This release marks the first opportunity for users to experience the shielding feature of zkOS in action, demonstrating the speed and privacy capabilities of Aleph Zero’s zero-knowledge proof (ZK) technology optimizations. Privacy at Lightning Speed The Shielding Demo release is a significant milestone for Aleph Zero, representing its commitment to developing practical privacy solutions for the blockchain industry. Aleph Zero’s zkOS enables zero-knowledge proofs to be generated client-side—meaning data is encrypted locally on the user’s device and never leaves unencrypted—providing high levels of privacy without compromising transaction speed. The Shielding Demo serves as the first practical interface for users to experience this privacy functionality, with zero-knowledge proofs generated within 0.5-3 seconds, ensuring that privacy has minimal impact on transaction performance. “Privacy has long been a challenge in blockchain, often due to poor user experience,” said Adam Gagol, Co-Founder & CTO of Aleph Zero. “With today’s release, we’re delivering one of the fastest client-side ZK directly to users, combining privacy and performance. The release of the Shielding Demo offers a glimpse into how zkOS can bring privacy to DeFi without sacrificing speed or usability.” How the Shielding Demo Works The Shielding Demo provides an intuitive interface for users to test Aleph Zero’s zkOS privacy layer. Here’s how it works: Data Privacy: zkOS generates zero-knowledge proofs locally on the user’s device, ensuring that data remains private and secure.
Transaction Flow: Users generate ZK proofs, send transactions to a relayer, and then they are executed on-chain—all while maintaining privacy.
Fast Proving Times: The system delivers ZK proofs in 0.5-3 seconds on most devices, demonstrating zkOS’s speed and its minimal impact on transaction times. The Testnet version of zkOS allows users to interact with the system and witness its capabilities, though Aleph Zero notes that the privacy features will be built directly into the upcoming Common app. Why zkOS Matters: A Glimpse Into the Future The launch of the Shielding Demo on Testnet is only the beginning. Aleph Zero's roadmap for zkOS extends far beyond this initial release, with ongoing work on simplifying the user experience and the introduction of additional privacy features, such as ZK-ID and anonymity revokers, to ensure both privacy and protection against fraudulent use of the platform. The system is designed to be easily integrated by developers, providing a privacy framework that requires minimal cryptographic knowledge. This simplicity, combined with Aleph Zero’s rapid client-side ZK proof generation, makes zkOS a critical tool for developers building privacy-centric applications across DeFi and other web3 sectors. Unlocking Privacy for New Use Case The privacy space in blockchain has been facing increased challenges, such as regulatory scrutiny and delistings, often due to concerns over non-compliance. Aleph Zero’s zkOS offers a fresh approach by delivering privacy solutions that balance user confidentiality with regulatory requirements. Instead of focusing solely on anonymity, zkOS is designed to meet both the needs of users and the evolving demands of compliance. zkOS enables users to manage their assets securely across multiple blockchains, ensuring their transactions remain private. Unlike traditional privacy methods that rely on centralized or hardware-based systems, zkOS operates directly on the client-side, safeguarding privacy without external dependencies. Next Steps for Aleph Zero As the Testnet release progresses, Aleph Zero is focusing on refining Shielding and zkOS for its Mainnet deployment. Users who engage with the Shielding Demo will have the opportunity to be whitelisted for upcoming zkOS Beta testing on Aleph Zero’s EVM Mainnet. About Aleph Zero Aleph Zero is an ecosystem of blockchain solutions that are engineered for speed, data confidentiality, and ease of development. It achieves efficiencies akin to conventional web2 systems, upholds rigorous standards for data protection via zero-knowledge proofs (ZKP), and offers a comprehensive toolset for development across web3, ranging from WASM-based Rust to EVM-based Solidity environments. Aleph Zero’s versatility is highlighted by over 40 use cases being actively developed, showcasing its adaptability across various sectors and applications. These use cases are part of an engaged community and growing ecosystem of web3 applications supported by Aleph Zero programs. For more information, visit https://alephzero.org/. For any inquiries about this release, please contact josh@serotonin.co or ana@serotonin.co. Contact PR Manager Josh Adams Aleph Zero josh@serotonin.co This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here. **ZUG, Switzerland, October 17th, 2024/Chainwire/--**Most zero-knowledge proofs are generated server-side for scaling, but Aleph Zero’s zkOS does that directly on users’ devices, offering privacy in a fraction of second. Aleph Zero , the leading blockchain platform recognized for its focus on privacy and scalability, announces the launch of the first feature of zkOS (zero-knowledge operating system)—Shielding, on its EVM Testnet. This release marks the first opportunity for users to experience the shielding feature of zkOS in action, demonstrating the speed and privacy capabilities of Aleph Zero’s zero-knowledge proof (ZK) technology optimizations. Aleph Zero Aleph Zero zkOS zkOS Privacy at Lightning Speed The Shielding Demo release is a significant milestone for Aleph Zero, representing its commitment to developing practical privacy solutions for the blockchain industry. Aleph Zero’s zkOS enables zero-knowledge proofs to be generated client-side—meaning data is encrypted locally on the user’s device and never leaves unencrypted—providing high levels of privacy without compromising transaction speed. Shielding Demo Shielding Demo The Shielding Demo serves as the first practical interface for users to experience this privacy functionality, with zero-knowledge proofs generated within 0.5-3 seconds, ensuring that privacy has minimal impact on transaction performance. “Privacy has long been a challenge in blockchain, often due to poor user experience,” said Adam Gagol, Co-Founder & CTO of Aleph Zero. “With today’s release, we’re delivering one of the fastest client-side ZK directly to users, combining privacy and performance. The release of the Shielding Demo offers a glimpse into how zkOS can bring privacy to DeFi without sacrificing speed or usability.” “Privacy has long been a challenge in blockchain, often due to poor user experience,” said Adam Gagol, Co-Founder & CTO of Aleph Zero. “With today’s release, we’re delivering one of the fastest client-side ZK directly to users, combining privacy and performance. The release of the Shielding Demo offers a glimpse into how zkOS can bring privacy to DeFi without sacrificing speed or usability.” How the Shielding Demo Works The Shielding Demo provides an intuitive interface for users to test Aleph Zero’s zkOS privacy layer. Here’s how it works: Data Privacy: zkOS generates zero-knowledge proofs locally on the user’s device, ensuring that data remains private and secure. Transaction Flow: Users generate ZK proofs, send transactions to a relayer, and then they are executed on-chain—all while maintaining privacy. Fast Proving Times: The system delivers ZK proofs in 0.5-3 seconds on most devices, demonstrating zkOS’s speed and its minimal impact on transaction times. Data Privacy: zkOS generates zero-knowledge proofs locally on the user’s device, ensuring that data remains private and secure. Transaction Flow: Users generate ZK proofs, send transactions to a relayer, and then they are executed on-chain—all while maintaining privacy. Fast Proving Times: The system delivers ZK proofs in 0.5-3 seconds on most devices, demonstrating zkOS’s speed and its minimal impact on transaction times. The Testnet version of zkOS allows users to interact with the system and witness its capabilities, though Aleph Zero notes that the privacy features will be built directly into the upcoming Common app. Why zkOS Matters: A Glimpse Into the Future The launch of the Shielding Demo on Testnet is only the beginning. Aleph Zero's roadmap for zkOS extends far beyond this initial release, with ongoing work on simplifying the user experience and the introduction of additional privacy features, such as ZK-ID and anonymity revokers, to ensure both privacy and protection against fraudulent use of the platform. The system is designed to be easily integrated by developers, providing a privacy framework that requires minimal cryptographic knowledge. This simplicity, combined with Aleph Zero’s rapid client-side ZK proof generation, makes zkOS a critical tool for developers building privacy-centric applications across DeFi and other web3 sectors. Unlocking Privacy for New Use Case The privacy space in blockchain has been facing increased challenges, such as regulatory scrutiny and delistings, often due to concerns over non-compliance. Aleph Zero’s zkOS offers a fresh approach by delivering privacy solutions that balance user confidentiality with regulatory requirements. Instead of focusing solely on anonymity, zkOS is designed to meet both the needs of users and the evolving demands of compliance. zkOS enables users to manage their assets securely across multiple blockchains, ensuring their transactions remain private. Unlike traditional privacy methods that rely on centralized or hardware-based systems, zkOS operates directly on the client-side, safeguarding privacy without external dependencies. Next Steps for Aleph Zero As the Testnet release progresses, Aleph Zero is focusing on refining Shielding and zkOS for its Mainnet deployment. Users who engage with the Shielding Demo will have the opportunity to be whitelisted for upcoming zkOS Beta testing on Aleph Zero’s EVM Mainnet. About Aleph Zero Aleph Zero is an ecosystem of blockchain solutions that are engineered for speed, data confidentiality, and ease of development. It achieves efficiencies akin to conventional web2 systems, upholds rigorous standards for data protection via zero-knowledge proofs (ZKP), and offers a comprehensive toolset for development across web3, ranging from WASM-based Rust to EVM-based Solidity environments. Aleph Zero’s versatility is highlighted by over 40 use cases being actively developed, showcasing its adaptability across various sectors and applications. These use cases are part of an engaged community and growing ecosystem of web3 applications supported by Aleph Zero programs. For more information, visit https://alephzero.org/ . For any inquiries about this release, please contact josh@serotonin.co or ana@serotonin.co. https://alephzero.org/ https://alephzero.org/ Contact PR Manager Josh Adams Aleph Zero josh@serotonin.co This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here. This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here . here here

Aleph Zero Launches Subsecond Shielding on Testnet, Delivering Client-Side ZK Privacy For DeFi

Aleph Zero стартира Subsecond Shielding в Testnet, предоставяйки ZK поверителност от страна на клиента за DeFi

Aleph Zero pokreće Subsecond Shielding na Testnetu, pružajući ZK privatnost na strani klijenta za DeFi

Aleph Zero spouští Subsecond Shielding na Testnetu a poskytuje soukromí ZK na straně klienta pro DeFi

Aleph Zero lanza protección de subsegundos en Testnet, brindando privacidad ZK del lado del cliente para DeFi

Aleph Zero-k Testnet-en azpisegundoko babesa abiarazten du, DeFi-rako bezeroaren aldetik ZK pribatutasuna eskainiz

Aleph Zero lanse Subsecond Shielding sou Testnet, bay konfidansyalite ZK bò kliyan pou DeFi.

Aleph Zero がテストネットでサブセカンドシールドを開始、DeFi にクライアント側の ZK プライバシーを提供

Aleph Zero Abandi Blindage ya Sous-second na Testnet, Azali Kopesa Bomoi Ya ZK Ya Côté Client Pona DeFi

Aleph Zero ievieš apakšsekundes ekrānu tīklā Testnet, nodrošinot klienta puses ZK konfidencialitāti DeFi

الیف زیرو په ټیسټنیټ کې فرعي ثانیې شیلډینګ پیل کړ ، د DeFi لپاره د پیرودونکي اړخ ZK محرمیت وړاندې کوي

ኣለፍ ዜሮ ኣብ ቴስትኔት ንኡስ ካልኢት ሺልዲንግ ኣበጊሱ፡ ንዲፊ ብወገን ዓሚል ZK ብሕታዊነት ኣቕሪቡ።

I-Aleph Zero ikhupha i-Subsecond Shielding kwi-Testnet, ihambisa uMthengi-kwicala le-ZK yaBucala kwi-DeFi

This post is part of a series comparing different ways to implement asynchronous requests on the client to augment the latter. So far, I described the process with Vue.js and Alpine.js. Both are similar from the developers' point of view: they involve JavaScript. In this post, I'll focus on HTMX, whose approach is quite different. Laying out the work I'll follow the same structure as in the previous posts of the series. Here's the setup, server- and client-side. Server-side Here is how I integrate Thymeleaf and HTMX in the POM: <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>            
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>      
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>                    
        <version>0.52</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>htmx.org</artifactId>                           
        <version>2.0.1</version>
    </dependency>
</dependencies> Same as with previous frameworks
The HTMX dependency Client-side The code on the HTML side is straightforward: <script th:src="@{/webjars/htmx.org/dist/htmx.js}" src="https://cdn.jsdelivr.net/npm/htmx.org@1.9/dist/htmx.min.js"></script>  Add the HTMX dependency Working with HTMX We want to implement the same features as previously. HTMX implements a radical approach that is different from traditional AJAX frameworks. They force you to develop an HTTP API that accepts and returns JSON. With HTMX, you return HTML fragments instead. HTMX uses it to replace the DOM elements that you configured. Hence, you need to write neither JavaScript nor deal with JSON and serialization of entities. Designing the fragments HTMX nicely complements Thymeleaf because both work with page fragments. We can align Thymeleaf's fragments to HTMX's responses. It requires thinking ahead, which differs from the previous AJAX/API/JSON standard, but it's worth it. Let's list interactions and what fragment we replace for each of them: Load the page: the whole page is rendered server-side, it's not asynchronous
Click the completed checkbox on a line: the line is replaced with the underlying todo's new state. We didn't do anything client-side with previous frameworks; we will ignore it as well.
Clean up completed tasks: replace the todo table's lines with lines of uncompleted tasks
Add a new todo: replace the table with all lines plus the new one and replace the label field with an empty field to reset it. The Add field and button were in the table's footer in previous designs. There's no reason to change this. Here's the conceptual fragments design for our app: -------------------- APP --------------------
| index.html                                |
|                                           |
|  ---------------- TABLE ----------------  |
|  | table.html                          |  |
|  |                                     |  |
|  |  ------------- LINES -------------  |  |
|  |  | lines.html                    |  |  |
|  |  |                               |  |  |
|  |  ---------------------------------  |  |
|  ---------------------------------------  |
--------------------------------------------- I'll split the HTML page into these fragments. Because we render them via Thymeleaf, we can split each into their dedicated file for a cleaner separation. At initial load time, we use Thymeleaf's replace directive; we use HTMX for asynchronous client-side interactions. Our first interaction We will start with the cleanup feature, as it's the easiest one with HTMX. Here's the HTML code: <tbody id="lines">...</tbody>                                       

<button class="btn btn-warning"
        hx-trigger="click"                                          
        hx-delete="/htmx/todo:cleanup"                              
        hx-target="#lines">                                         
    Cleanup
</button> Define the lines DOM element
HTMX triggers on the click event
HTMX will send a DELETE HTTP request to the URL
When the HTML fragment response comes back, HTMX replaces the lines DOM element with it Note that there's no explicit JavaScript involved, not a single line of code. HTMX takes care of it. On the server side, the code is the following: fun htmx(todos: MutableList<Todo>) = router {
    DELETE("/htmx/todo:cleanup") {
        todos.removeIf { it.completed }                             //1
        ok().render("htmx/lines", mapOf("todos" to todos))          //2
    }
} Regular cleanup
Use the render() function, instead of body() for API calls. Because of our previous file split, we can render only the needed HTML fragment. It uses Thymeleaf for any necessary server-side rendering. That's the heart of HTMX: bind an HTTP call to a client-side event, and replace the configured DOM element with the server response. Adding a new todo follows the same principle, but the DOM element is the whole table to reset the label value. If interested in the complete, look at the code. Marking a todo complete While I mentioned that we will not return anything from the check request, it presents an exciting challenge. That's the reason why I am only addressing it now. We have two challenges when clicking on the checkbox: send the state of the checkbox as the JSON payload to update it server-side
get and use the ID of the todo HTMX offers the hx-vals for the JSON payload. However, the URL is different for each row as we want to include the ID in the path. We must generate it server-side with Thymeleaf. TIL: Thymeleaf can manage any HTML attribute prefixed with th:: it will process the value as usual and write the attribute's name unprefixed. <input type="checkbox"
       th:checked="${todo.completed}"                               
       hx-trigger="click"                                           
       th:hx-patch="'/htmx/todo/' + ${todo.id}"                     
       hx-vals='js:{"checked": event.target.checked}' />             Regular Thymeleaf syntax to check the box if the todo is completed
HTMX triggers on click events
Send a PATCH request to the server, with Thymeleaf having replaced the id with the value in the HTML previously
Static request JSON payload Note that, as explained above, I ignored the response. In a real-world scenario, you should check/uncheck the checkbox depending on the value returned to avoid keeping the server state and the UI in synch. Conclusion In the two previous posts, I described Vue and Alpine. We configured Spring Boot to return JSON. With HTMX, we configured it to return HTML. Additionally, we didn't need any JavaScript code to send the requests from the client. Icing on the cake, there's a great synergy between Thymeleaf and HTMX: we can split the page into fragments and reuse them on both sides. The complete source code for this post can be found on GitHub: https://github.com/ajavageek/compare-frontends?embedable=true To go further: HTMX This post is part of a series comparing different ways to implement asynchronous requests on the client to augment the latter. So far, I described the process with Vue.js and Alpine.js . Both are similar from the developers' point of view: they involve JavaScript. Vue.js Alpine.js In this post, I'll focus on HTMX , whose approach is quite different. HTMX Laying out the work I'll follow the same structure as in the previous posts of the series. Here's the setup, server- and client-side. Server-side Here is how I integrate Thymeleaf and HTMX in the POM: <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>            
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>      
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>                    
        <version>0.52</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>htmx.org</artifactId>                           
        <version>2.0.1</version>
    </dependency>
</dependencies> <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>            
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>      
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>                    
        <version>0.52</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>htmx.org</artifactId>                           
        <version>2.0.1</version>
    </dependency>
</dependencies> Same as with previous frameworks The HTMX dependency Same as with previous frameworks The HTMX dependency Client-side The code on the HTML side is straightforward: <script th:src="@{/webjars/htmx.org/dist/htmx.js}" src="https://cdn.jsdelivr.net/npm/htmx.org@1.9/dist/htmx.min.js"></script>  <script th:src="@{/webjars/htmx.org/dist/htmx.js}" src="https://cdn.jsdelivr.net/npm/htmx.org@1.9/dist/htmx.min.js"></script>  Add the HTMX dependency Add the HTMX dependency Working with HTMX We want to implement the same features as previously. HTMX implements a radical approach that is different from traditional AJAX frameworks. They force you to develop an HTTP API that accepts and returns JSON. With HTMX, you return HTML fragments instead. HTMX uses it to replace the DOM elements that you configured. Hence, you need to write neither JavaScript nor deal with JSON and serialization of entities. HTML fragments Designing the fragments HTMX nicely complements Thymeleaf because both work with page fragments. We can align Thymeleaf's fragments to HTMX's responses. It requires thinking ahead, which differs from the previous AJAX/API/JSON standard, but it's worth it. Let's list interactions and what fragment we replace for each of them: Load the page: the whole page is rendered server-side, it's not asynchronous Click the completed checkbox on a line: the line is replaced with the underlying todo's new state. We didn't do anything client-side with previous frameworks; we will ignore it as well. Clean up completed tasks: replace the todo table's lines with lines of uncompleted tasks Add a new todo: replace the table with all lines plus the new one and replace the label field with an empty field to reset it. The Add field and button were in the table's footer in previous designs. There's no reason to change this. Load the page: the whole page is rendered server-side, it's not asynchronous Click the completed checkbox on a line: the line is replaced with the underlying todo's new state. We didn't do anything client-side with previous frameworks; we will ignore it as well. Clean up completed tasks: replace the todo table's lines with lines of uncompleted tasks Add a new todo: replace the table with all lines plus the new one and replace the label field with an empty field to reset it. The Add field and button were in the table's footer in previous designs. There's no reason to change this. Here's the conceptual fragments design for our app: -------------------- APP --------------------
| index.html                                |
|                                           |
|  ---------------- TABLE ----------------  |
|  | table.html                          |  |
|  |                                     |  |
|  |  ------------- LINES -------------  |  |
|  |  | lines.html                    |  |  |
|  |  |                               |  |  |
|  |  ---------------------------------  |  |
|  ---------------------------------------  |
--------------------------------------------- -------------------- APP --------------------
| index.html                                |
|                                           |
|  ---------------- TABLE ----------------  |
|  | table.html                          |  |
|  |                                     |  |
|  |  ------------- LINES -------------  |  |
|  |  | lines.html                    |  |  |
|  |  |                               |  |  |
|  |  ---------------------------------  |  |
|  ---------------------------------------  |
--------------------------------------------- I'll split the HTML page into these fragments. Because we render them via Thymeleaf, we can split each into their dedicated file for a cleaner separation. At initial load time, we use Thymeleaf's replace directive; we use HTMX for asynchronous client-side interactions. replace Our first interaction We will start with the cleanup feature, as it's the easiest one with HTMX. Here's the HTML code: <tbody id="lines">...</tbody>                                       

<button class="btn btn-warning"
        hx-trigger="click"                                          
        hx-delete="/htmx/todo:cleanup"                              
        hx-target="#lines">                                         
    Cleanup
</button> <tbody id="lines">...</tbody>                                       

<button class="btn btn-warning"
        hx-trigger="click"                                          
        hx-delete="/htmx/todo:cleanup"                              
        hx-target="#lines">                                         
    Cleanup
</button> Define the lines DOM element HTMX triggers on the click event HTMX will send a DELETE HTTP request to the URL When the HTML fragment response comes back, HTMX replaces the lines DOM element with it Define the lines DOM element lines HTMX triggers on the click event click HTMX will send a DELETE HTTP request to the URL DELETE When the HTML fragment response comes back, HTMX replaces the lines DOM element with it lines Note that there's no explicit JavaScript involved, not a single line of code. HTMX takes care of it. no explicit JavaScript On the server side, the code is the following: fun htmx(todos: MutableList<Todo>) = router {
    DELETE("/htmx/todo:cleanup") {
        todos.removeIf { it.completed }                             //1
        ok().render("htmx/lines", mapOf("todos" to todos))          //2
    }
} fun htmx(todos: MutableList<Todo>) = router {
    DELETE("/htmx/todo:cleanup") {
        todos.removeIf { it.completed }                             //1
        ok().render("htmx/lines", mapOf("todos" to todos))          //2
    }
} Regular cleanup Use the render() function, instead of body() for API calls. Because of our previous file split, we can render only the needed HTML fragment. It uses Thymeleaf for any necessary server-side rendering. Regular cleanup Use the render() function, instead of body() for API calls. Because of our previous file split, we can render only the needed HTML fragment. It uses Thymeleaf for any necessary server-side rendering. render() body() That's the heart of HTMX: bind an HTTP call to a client-side event, and replace the configured DOM element with the server response. Adding a new todo follows the same principle, but the DOM element is the whole table to reset the label value. If interested in the complete, look at the code . label the code Marking a todo complete While I mentioned that we will not return anything from the check request, it presents an exciting challenge. That's the reason why I am only addressing it now. We have two challenges when clicking on the checkbox: send the state of the checkbox as the JSON payload to update it server-side get and use the ID of the todo send the state of the checkbox as the JSON payload to update it server-side get and use the ID of the todo todo HTMX offers the hx-vals for the JSON payload. However, the URL is different for each row as we want to include the ID in the path. We must generate it server-side with Thymeleaf. TIL: Thymeleaf can manage any HTML attribute prefixed with th: : it will process the value as usual and write the attribute's name unprefixed. hx-vals any th: <input type="checkbox"
       th:checked="${todo.completed}"                               
       hx-trigger="click"                                           
       th:hx-patch="'/htmx/todo/' + ${todo.id}"                     
       hx-vals='js:{"checked": event.target.checked}' />             <input type="checkbox"
       th:checked="${todo.completed}"                               
       hx-trigger="click"                                           
       th:hx-patch="'/htmx/todo/' + ${todo.id}"                     
       hx-vals='js:{"checked": event.target.checked}' />             Regular Thymeleaf syntax to check the box if the todo is completed HTMX triggers on click events Send a PATCH request to the server, with Thymeleaf having replaced the id with the value in the HTML previously Static request JSON payload Regular Thymeleaf syntax to check the box if the todo is completed todo HTMX triggers on click events click Send a PATCH request to the server, with Thymeleaf having replaced the id with the value in the HTML previously PATCH id Static request JSON payload Note that, as explained above, I ignored the response. In a real-world scenario, you should check/uncheck the checkbox depending on the value returned to avoid keeping the server state and the UI in synch. Conclusion In the two previous posts, I described Vue and Alpine. We configured Spring Boot to return JSON. With HTMX, we configured it to return HTML. Additionally, we didn't need any JavaScript code to send the requests from the client. Icing on the cake, there's a great synergy between Thymeleaf and HTMX: we can split the page into fragments and reuse them on both sides. The complete source code for this post can be found on GitHub: https://github.com/ajavageek/compare-frontends?embedable=true https://github.com/ajavageek/compare-frontends?embedable=true To go further: To go further: HTMX HTMX HTMX

Augmenting the Client With HTMX

This post is part of a series comparing different ways to implement asynchronous requests on the client, which is colloquially known as AJAX. I dedicated the previous post to Vue.js; I'll dedicate this one to Alpine.js - not to be confused with Alpine Linux. I'll follow the same structure as previously. Laying out the work Here's the setup, server- and client-side. Server-side Here is how I integrate Thymeleaf and Alpine.js in the POM: <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>        
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>  
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>                
        <version>0.52</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>alpinejs</artifactId>                       
        <version>3.14.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>axios</artifactId>                          
        <version>1.7.3</version>
    </dependency>
</dependencies> Same as last week with Vue
Alpine instead of Vue It's similar to Vue's setup. Client-side Here's the code on the HTML side: <script th:src="@{/webjars/axios/dist/axios.js}" src="https://cdn.jsdelivr.net/npm/axios@1.7/dist/axios.min.js"></script> 
<script th:src="@{/webjars/alpinejs/dist/cdn.js}" src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script> 
<script th:src="@{/alpine.js}" src="../static/alpine.js"></script>  
<script th:inline="javascript">
/*<![CDATA[*/
    window.alpineData = {                                           
        title: /*[[${ title }]]*/ 'A Title',
        todos: /*[[${ todos }]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }]
    }
/*]]>*/
</script> Axios helps making HTTP requests
Alpine itself
Our client-side code
Set the data As for the POM, it's the same code for Alpine as for Vue. The Alpine code We want to implement the same features as for Vue. Our first steps into Alpine The first step is to bootstrap the framework. We already added the link to our custom alpine.js file above. document.addEventListener('alpine:init', () => {                    //1
    Alpine.data('app', () => ({                                     //2
        // The next JavaScript code snippets will be inside the block
    }))
}) Run the block when the alpine:init event is triggered; the triggering event is specific to Alpine.
Bootstrap Alpine and configure it to manage the HTML fragment identified by app We now set the app id on the HTML side. <div id="app">
</div> Until now, it's very similar to Vue.js, a straight one-to-one mapping. Unlike Vue.js, Alpine doesn't seem to have templates. The official UI components are not free. I found an Open Source approach, but it's unavailable on WebJars. Basic interactions Let's implement the check of the complete checkbox. Here's the HTML code: <input type="checkbox" :checked="todo.completed" @click="check(todo.id)"> 
<input type="checkbox" :checked="todo.completed" @click="check" />   Alpine code
Vue code The code is very similar, with the difference that Alpine allows passing parameters. On the Javascript side, we must define the function, and that's all: Alpine.data('app', () => ({
    check(id) {
        axios.patch(`/api/todo/${id}`, {checked: event.target.checked})
    }
})) Client-side model You might wonder where the todo above comes from. The answer is: from the local model. We initialize it in the app or to be more precise, we initialize the list: Alpine.data('app', () => ({
    title: window.alpineData.title,                                 //1
    todos: window.alpineData.todos,                                 //2
})) Initialize the title even if it's read-only
Initialize the todos list; at this point, it's read-only but we are going to update it the next section Updating the model In this section, we will implement adding a new Todo. Here's the HTML snippet: <form>
    <div class="form-group row">
        <label for="new-todo-label" class="col-auto col-form-label">New task</label>
        <div class="col-10">
            <input type="text" id="new-todo-label" placeholder="Label" class="form-control" x-model="label" /> 
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-success" @click="create()">Add</button> 
        </div>
    </div>
</form> The x-model defines a model and binds the label property defined in app
Define the behavior of the button, as in the previous section The related code is the following: Alpine.data('app', () => ({
    label: '',                                                      //1
    create() {
        axios.post('/api/todo', {label: this.label}).then(response => { //2
            this.todos.push(response.data)                          //3
        }).then(() => {
            this.label = ''                                         //4
        })
    }
})) Define a new label property
Send a POST request with the label value as the JSON payload
Get the response payload and add it to the local model of Todo
Reset the label value Conclusion Alpine is very similar to Vue, with the notable difference of the lack of templating; components are only available via a price. All other features have an equivalent. I may need to be corrected because the documentation is less extensive. Also, Vue is much more popular than Alpine. The complete source code for this post can be found on GitHub: https://github.com/ajavageek/compare-frontends?embedable=true To go further: Alpine.js This post is part of a series comparing different ways to implement asynchronous requests on the client, which is colloquially known as AJAX. I dedicated the previous post to Vue.js; I'll dedicate this one to Alpine.js - not to be confused with Alpine Linux. previous post Alpine.js I'll follow the same structure as previously. Laying out the work Here's the setup, server- and client-side. Server-side Here is how I integrate Thymeleaf and Alpine.js in the POM: <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>        
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>  
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>                
        <version>0.52</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>alpinejs</artifactId>                       
        <version>3.14.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>axios</artifactId>                          
        <version>1.7.3</version>
    </dependency>
</dependencies> <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>        
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>  
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>                
        <version>0.52</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>alpinejs</artifactId>                       
        <version>3.14.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars.npm</groupId>
        <artifactId>axios</artifactId>                          
        <version>1.7.3</version>
    </dependency>
</dependencies> Same as last week with Vue Alpine instead of Vue Same as last week with Vue Alpine instead of Vue It's similar to Vue's setup. Client-side Here's the code on the HTML side: <script th:src="@{/webjars/axios/dist/axios.js}" src="https://cdn.jsdelivr.net/npm/axios@1.7/dist/axios.min.js"></script> 
<script th:src="@{/webjars/alpinejs/dist/cdn.js}" src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script> 
<script th:src="@{/alpine.js}" src="../static/alpine.js"></script>  
<script th:inline="javascript">
/*<![CDATA[*/
    window.alpineData = {                                           
        title: /*[[${ title }]]*/ 'A Title',
        todos: /*[[${ todos }]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }]
    }
/*]]>*/
</script> <script th:src="@{/webjars/axios/dist/axios.js}" src="https://cdn.jsdelivr.net/npm/axios@1.7/dist/axios.min.js"></script> 
<script th:src="@{/webjars/alpinejs/dist/cdn.js}" src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js" defer></script> 
<script th:src="@{/alpine.js}" src="../static/alpine.js"></script>  
<script th:inline="javascript">
/*<![CDATA[*/
    window.alpineData = {                                           
        title: /*[[${ title }]]*/ 'A Title',
        todos: /*[[${ todos }]]*/ [{ 'id': 1, 'label': 'Take out the trash', 'completed': false }]
    }
/*]]>*/
</script> Axios helps making HTTP requests Alpine itself Our client-side code Set the data Axios helps making HTTP requests Axios Alpine itself Our client-side code Set the data As for the POM, it's the same code for Alpine as for Vue. The Alpine code We want to implement the same features as for Vue. Our first steps into Alpine The first step is to bootstrap the framework. We already added the link to our custom alpine.js file above. alpine.js document.addEventListener('alpine:init', () => {                    //1
    Alpine.data('app', () => ({                                     //2
        // The next JavaScript code snippets will be inside the block
    }))
}) document.addEventListener('alpine:init', () => {                    //1
    Alpine.data('app', () => ({                                     //2
        // The next JavaScript code snippets will be inside the block
    }))
}) Run the block when the alpine:init event is triggered; the triggering event is specific to Alpine. Bootstrap Alpine and configure it to manage the HTML fragment identified by app Run the block when the alpine:init event is triggered; the triggering event is specific to Alpine. alpine:init Bootstrap Alpine and configure it to manage the HTML fragment identified by app app We now set the app id on the HTML side. app <div id="app">
</div> <div id="app">
</div> Until now, it's very similar to Vue.js, a straight one-to-one mapping. Unlike Vue.js, Alpine doesn't seem to have templates . The official UI components are not free. I found an Open Source approach , but it's unavailable on WebJars. templates UI components Open Source approach Basic interactions Let's implement the check of the complete checkbox. Here's the HTML code: <input type="checkbox" :checked="todo.completed" @click="check(todo.id)"> 
<input type="checkbox" :checked="todo.completed" @click="check" />   <input type="checkbox" :checked="todo.completed" @click="check(todo.id)"> 
<input type="checkbox" :checked="todo.completed" @click="check" />   Alpine code Vue code Alpine code Vue code The code is very similar, with the difference that Alpine allows passing parameters. On the Javascript side, we must define the function, and that's all: Alpine.data('app', () => ({
    check(id) {
        axios.patch(`/api/todo/${id}`, {checked: event.target.checked})
    }
})) Alpine.data('app', () => ({
    check(id) {
        axios.patch(`/api/todo/${id}`, {checked: event.target.checked})
    }
})) Client-side model You might wonder where the todo above comes from. The answer is: from the local model. todo We initialize it in the app or to be more precise, we initialize the list: app Alpine.data('app', () => ({
    title: window.alpineData.title,                                 //1
    todos: window.alpineData.todos,                                 //2
})) Alpine.data('app', () => ({
    title: window.alpineData.title,                                 //1
    todos: window.alpineData.todos,                                 //2
})) Initialize the title even if it's read-only Initialize the todos list; at this point, it's read-only but we are going to update it the next section Initialize the title even if it's read-only title Initialize the todos list; at this point, it's read-only but we are going to update it the next section todos Updating the model In this section, we will implement adding a new Todo . Todo Here's the HTML snippet: <form>
    <div class="form-group row">
        <label for="new-todo-label" class="col-auto col-form-label">New task</label>
        <div class="col-10">
            <input type="text" id="new-todo-label" placeholder="Label" class="form-control" x-model="label" /> 
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-success" @click="create()">Add</button> 
        </div>
    </div>
</form> <form>
    <div class="form-group row">
        <label for="new-todo-label" class="col-auto col-form-label">New task</label>
        <div class="col-10">
            <input type="text" id="new-todo-label" placeholder="Label" class="form-control" x-model="label" /> 
        </div>
        <div class="col-auto">
            <button type="button" class="btn btn-success" @click="create()">Add</button> 
        </div>
    </div>
</form> The x-model defines a model and binds the label property defined in app Define the behavior of the button, as in the previous section The x-model defines a model and binds the label property defined in app x-model label app Define the behavior of the button, as in the previous section The related code is the following: Alpine.data('app', () => ({
    label: '',                                                      //1
    create() {
        axios.post('/api/todo', {label: this.label}).then(response => { //2
            this.todos.push(response.data)                          //3
        }).then(() => {
            this.label = ''                                         //4
        })
    }
})) Alpine.data('app', () => ({
    label: '',                                                      //1
    create() {
        axios.post('/api/todo', {label: this.label}).then(response => { //2
            this.todos.push(response.data)                          //3
        }).then(() => {
            this.label = ''                                         //4
        })
    }
})) Define a new label property Send a POST request with the label value as the JSON payload Get the response payload and add it to the local model of Todo Reset the label value Define a new label property label Send a POST request with the label value as the JSON payload POST label Get the response payload and add it to the local model of Todo Todo Reset the label value label Conclusion Alpine is very similar to Vue, with the notable difference of the lack of templating; components are only available via a price. All other features have an equivalent. I may need to be corrected because the documentation is less extensive. Also, Vue is much more popular than Alpine. The complete source code for this post can be found on GitHub: https://github.com/ajavageek/compare-frontends?embedable=true https://github.com/ajavageek/compare-frontends?embedable=true To go further: To go further: Alpine.js Alpine.js Alpine.js

Augmenting the Client With Alpine.js

Cybersecurity threats are evolving at an alarming rate. From sophisticated malware to state-sponsored attacks, businesses worldwide face a battle as they attempt to safeguard their data. According to a report by Cybersecurity Ventures, the cost of cybercrime reached $8 trillion in 2023 alone and is projected to rise to $10.5 trillion by 2025. Businesses need robust security measures and future-proof strategies to prevent time consuming and costly security breaches. Unfortunately, attackers can exploit vulnerabilities from any point within a system. From the base hardware level to man-in-the-middle attacks and even social engineering, organisations still need a sufficiently intelligent threat prevention protocol. Security vendor bottlenecks leave them vulnerable to weaknesses. In these instances, businesses are over-reliant on a single solution or provider. Brander Group, a leading IT and network infrastructure consulting firm, tackles this issue with its vendor-neutral methodology. Offering a variety of network security & vulnerabilities solutions, Brander Group protects clients with multiple layers of redundancy so their network is avoids being at risk with a single point of failure. The Rising Tide of Network Security Threats In recent years, there has been a dramatic surge in sophisticated cyber attacks, with malware, ransomware, and advanced persistent threats (APTs) becoming increasingly prevalent. "The cybersecurity world has evolved at a dangerous pace," says Jake Brander, founder and CEO of Brander Group. "What worked yesterday may be obsolete today. That's why a flexible, vendor-neutral strategy is critical for long-term security." Vendor-Neutral Strategy: A Shield Against Vulnerabilities Brander Group specialises in vendor-neutral methods which are integral to protecting our clients. The company offers a diverse array of services & solutions, made possible by its partnerships with over 600 service providers globally. Brander Group provides each client with multiple options, fully managed deployments and support custom-tailored to their individual requirements and architectures. This strategy allows businesses to avoid the dangers of vendor lock-in, where dependence on a single provider can make it difficult to quickly adapt to new threats. Instead, Brander Group's clients benefit from a best-of-breed strategy, combining services from multiple providers to create a stronger security posture. "The idea isn’t just to avoid lock-ins. It's about creating a security ecosystem greater than the sum of its parts. We can mix and match solutions that are designed specifically for each client's needs," Brander explains. Brander Group's Expertise: The Human Element in Cybersecurity While the vendor-neutral strategy provides the framework, Brander Group's team of experts brings it to life. The company's provider-neutral engineers and consultants possess a deep understanding across a wide range of security protocols, allowing them to effectively and accurately wield each solution. "Technology is only as effective as the people implementing it. Moreover, the people implementing it must understand what is needed to effectively deliver each solution ." states Brander. Impenetrability Through Neutrality Brander Group’s services extend beyond simple security provision and implementation. Its team works closely with vendors and clients to develop comprehensive security strategies, conduct regular assessments, and provide ongoing support and training. With any system or device susceptible to several types of new age attacks, businesses worldwide are increasingly understanding the value of having a vendor-neutral network strategy. As Jake Brander aptly puts it, “There is no such thing as a truly secure system. But, with multiple layers of security, we can make it virtually impossible for any one security hole to be exploited. This is the true advantage of working with Brander Group – impenetrability through neutrality.” This piece was published as part of HackerNoon’s Business Blogging Program. For more details, please click here. Cybersecurity threats are evolving at an alarming rate. From sophisticated malware to state-sponsored attacks, businesses worldwide face a battle as they attempt to safeguard their data. According to a report by Cybersecurity Ventures, the cost of cybercrime reached $8 trillion in 2023 alone and is projected to rise to $10.5 trillion by 2025. Businesses need robust security measures and future-proof strategies to prevent time consuming and costly security breaches. Unfortunately, attackers can exploit vulnerabilities from any point within a system. From the base hardware level to man-in-the-middle attacks and even social engineering, organisations still need a sufficiently intelligent threat prevention protocol. Security vendor bottlenecks leave them vulnerable to weaknesses. In these instances, businesses are over-reliant on a single solution or provider. Brander Group, a leading IT and network infrastructure consulting firm, tackles this issue with its vendor-neutral methodology. Offering a variety of network security & vulnerabilities solutions, Brander Group protects clients with multiple layers of redundancy so their network is avoids being at risk with a single point of failure. network security The Rising Tide of Network Security Threats The Rising Tide of Network Security Threats In recent years, there has been a dramatic surge in sophisticated cyber attacks, with malware, ransomware, and advanced persistent threats (APTs) becoming increasingly prevalent. "The cybersecurity world has evolved at a dangerous pace," says Jake Brander, founder and CEO of Brander Group. "What worked yesterday may be obsolete today. That's why a flexible, vendor-neutral strategy is critical for long-term security." Vendor-Neutral Strategy: A Shield Against Vulnerabilities Vendor-Neutral Strategy: A Shield Against Vulnerabilities Brander Group specialises in vendor-neutral methods which are integral to protecting our clients. The company offers a diverse array of services & solutions, made possible by its partnerships with over 600 service providers globally. Brander Group provides each client with multiple options, fully managed deployments and support custom-tailored to their individual requirements and architectures. This strategy allows businesses to avoid the dangers of vendor lock-in, where dependence on a single provider can make it difficult to quickly adapt to new threats. Instead, Brander Group's clients benefit from a best-of-breed strategy, combining services from multiple providers to create a stronger security posture. " The idea isn’t just to avoid lock-ins. It's about creating a security ecosystem greater than the sum of its parts. We can mix and match solutions that are designed specifically for each client's needs ," Brander explains. The idea isn’t just to avoid lock-ins. It's about creating a security ecosystem greater than the sum of its parts. We can mix and match solutions that are designed specifically for each client's needs Brander Group's Expertise: The Human Element in Cybersecurity Brander Group's Expertise: The Human Element in Cybersecurity While the vendor-neutral strategy provides the framework, Brander Group's team of experts brings it to life. The company's provider-neutral engineers and consultants possess a deep understanding across a wide range of security protocols, allowing them to effectively and accurately wield each solution. " Technology is only as effective as the people implementing it. Moreover, the people implementing it must understand what is needed to effectively deliver each solution . " states Brander. Technology is only as effective as the people implementing it. Moreover, the people implementing it must understand what is needed to effectively deliver each solution . Impenetrability Through Neutrality Impenetrability Through Neutrality Brander Group’s services extend beyond simple security provision and implementation. Its team works closely with vendors and clients to develop comprehensive security strategies, conduct regular assessments, and provide ongoing support and training. With any system or device susceptible to several types of new age attacks, businesses worldwide are increasingly understanding the value of having a vendor-neutral network strategy. As Jake Brander aptly puts it, “ There is no such thing as a truly secure system. But, with multiple layers of security, we can make it virtually impossible for any one security hole to be exploited. This is the true advantage of working with Brander Group – impenetrability through neutrality. ” There is no such thing as a truly secure system. But, with multiple layers of security, we can make it virtually impossible for any one security hole to be exploited. This is the true advantage of working with Brander Group – impenetrability through neutrality. This piece was published as part of HackerNoon’s Business Blogging Program. For more details, please click here. This piece was published as part of HackerNoon’s Business Blogging Program. For more details, please click here. This piece was published as part of HackerNoon’s Business Blogging Program. For more details, please click here. This piece was published as part of HackerNoon’s Business Blogging Program. For more details, please click here . here

Brander Group's Vendor-Neutral Strategy Shields Clients from Network Security Vulnerabilities

Η στρατηγική ουδέτερης προμηθευτή του Ομίλου Brander προστατεύει τους πελάτες από ευπάθειες ασφάλειας δικτύου

La estrategia de Brander Group de no tener proveedores protege a los clientes de las vulnerabilidades de seguridad de la red

Brander Group-ի վաճառողի կողմից չեզոք ռազմավարությունը պաշտպանում է հաճախորդներին ցանցային անվտանգության խոցելիությունից

La strategia Vendor-Neutral di Brander Group protegge i clienti dalle vulnerabilità della sicurezza di rete

Brander Group のベンダー中立戦略により、クライアントをネットワーク セキュリティの脆弱性から保護

Brander Group-ის გამყიდველის ნეიტრალური სტრატეგია იცავს კლიენტებს ქსელის უსაფრთხოების დაუცველობისგან

ຍຸດທະສາດຜູ້ຂາຍ-ເປັນກາງຂອງກຸ່ມ Brander ປົກປ້ອງລູກຄ້າຈາກຊ່ອງໂຫວ່ຄວາມປອດໄພຂອງເຄືອຂ່າຍ

Стратегијата за неутрална добавувач на Brander Group ги штити клиентите од ранливости на мрежната безбедност

د برانډر ګروپ د پلورونکي - بې طرفه ستراتیژي پیرودونکي د شبکې امنیت زیانمننې څخه ساتي

Brander Grupo kaqpa Vendor-Neutral Estrategian Clientekunata Llika Seguridad Vulnerabilidades kaqmanta harkan

Брандер Гроуп-ова стратегија неутрална према добављачима штити клијенте од пропуста у мрежној безбедности

ናይ ብራንደር ግሩፕ ሸያጢ-ገለልተኛ ስትራተጂ ንዓማዊል ካብ ተቓላዕነት ድሕነት መርበብ ይከላኸለሎም

Augmenting the Client With Vue.js

تعزيز العميل باستخدام Vue.js

Proširivanje klijenta pomoću Vue.js

Augment del client amb Vue.js

Forøgelse af klienten med Vue.js

Ampliando el cliente con Vue.js

Հաճախորդի ավելացում Vue.js-ի միջոցով

Vue.js によるクライアントの拡張

Клиентті Vue.js көмегімен кеңейту

Зголемување на клиентот со Vue.js

Menambah Pelanggan Dengan Vue.js

Vue.js ile İstemciyi Geliştirme

Vue.js yordamida mijozni ko'paytirish

Source Code Analysis of Apache SeaTunnel Zeta Engine (Part 2): Task Submission Process on the Client Side

Implementing Client Load Balancing With Spring Cloud: A Guide

Stories, News & Mentions about CLIENTLY

Cliently’s Stories on HackerNoon