DEV Community: İbrahim Turan

Clean Architecture in Modern Frontend Development: A Comprehensive Guide

İbrahim Turan — Tue, 21 Jan 2025 11:00:03 +0000

In today's frontend world, we're constantly building more complex applications where business logic, UI components, and framework-specific code get tangled together, making our systems rigid and hard to maintain. I love how Robert C. Martin puts it: "Software was invented to be 'soft.' It was intended to be a way to easily change the behavior of machines. If we'd wanted the behavior of machines to be hard to change, we would have called it hardware." Let's explore how Clean Architecture principles can actually work in modern frontend development, with real patterns and practices that lead to maintainable, testable, and framework-independent applications.The Reality of Technical Debt and Market Pressure We've all heard this one before: "We can clean it up later; we just have to get to market first!" But let's be real - things never get cleaned up later because market pressures don't just disappear. "The fact is that making messes is always slower than staying clean, no matter which time scale you're using."

The Reality of Technical Debt and Market Pressure

"These developers buy into a familiar lie: 'We can clean it up later; we just have to get to market first!' Of course, things never do get cleaned up later because market pressures never abate."

"The fact is that making messes is always slower than staying clean, no matter which time scale you are using."

Clean Architecture Boundaries At every architectural boundary, you'll likely find the Humble Object pattern lurking nearby. Here's how that looks in practice:

// ❌ Quick and Dirty Implementation
const ProductPage: React.FC = () => {
  const [product, setProduct] = useState<Product | null>(null);
  const [relatedProducts, setRelatedProducts] = useState<Product[]>([]);
  const [cart, setCart] = useState<Cart | null>(null);
  const [error, setError] = useState<string | null>(null);

  // Messy side effects
  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(setProduct)
      .catch(err => setError(err.message));
  }, [id]);

  // Business logic mixed with UI logic
  const addToCart = async () => {
    try {
      const response = await fetch('/api/cart', {
        method: 'POST',
        body: JSON.stringify({ productId: product?.id }),
      });
      const updatedCart = await response.json();
      setCart(updatedCart);
      // Direct DOM manipulation
      window.alert('Added to cart!');
    } catch (err) {
      setError((err as Error).message);
    }
  };
};

// ✅ Clean, Modular Implementation
// Domain Entity
interface Product {
  id: string;
  name: string;
  price: Money;
  inventory: Inventory;
}

// Use Case / Application Service
class ProductService {
  constructor(private readonly productRepo: ProductRepository) {}

  async getProduct(id: string): Promise<Product> {
    return this.productRepo.findById(id);
  }

  async getRelatedProducts(product: Product): Promise<Product[]> {
    return this.productRepo.findRelated(product);
  }
}

// Repository Interface
interface ProductRepository {
  findById(id: string): Promise<Product>;
  findRelated(product: Product): Promise<Product[]>;
}

// Custom Hook (Framework-specific adapter)
const useProduct = (id: string) => {
  return useQuery(['product', id], () => productService.getProduct(id));
};

// Clean Component
const ProductPage: React.FC = () => {
  const { data: product, isLoading, error } = useProduct(id);
  const { data: relatedProducts } = useRelatedProducts(product);
  const { addToCart, isAdding } = useCartMutation();

  if (isLoading) return <ProductSkeleton />;
  if (error) return <ErrorBoundary error={error} />;

  return (
    <ProductLayout>
      <ProductDetails product={product} />
      <AddToCartButton 
        onAdd={() => addToCart(product.id)} 
        isLoading={isAdding} 
      />
      <RelatedProducts products={relatedProducts} />
    </ProductLayout>
  );
};

Architecture and Framework Independence

"The Web is a delivery mechanism... and your architecture should treat it as such."

"If the framework wants you to derive your business objects from its base classes, say no! Derive proxies instead, and keep those proxies in components that are plugins to your business rules."

// Domain Entities (Framework Independent)
interface Order {
  id: string;
  items: OrderItem[];
  total: Money;
  status: OrderStatus;
}

// Business Rules (Pure TypeScript)
class OrderCalculator {
  calculateTotal(items: OrderItem[]): Money {
    return items.reduce(
      (total, item) => total.add(item.price.multiply(item.quantity)),
      Money.zero()
    );
  }

  applyDiscount(order: Order, discount: Discount): Order {
    return {
      ...order,
      total: order.total.subtract(this.calculateDiscount(order, discount))
    };
  }
}

// Framework Adapter (React-specific)
const useOrder = (orderId: string) => {
  const calculator = new OrderCalculator();
  const { data: order } = useQuery(['order', orderId], fetchOrder);

  return {
    order,
    applyDiscount: (discount: Discount) => 
      calculator.applyDiscount(order!, discount),
    // other order operations...
  };
};

// UI Component (Framework-specific)
const OrderSummary: React.FC<{ orderId: string }> = ({ orderId }) => {
  const { order, applyDiscount } = useOrder(orderId);
  // React-specific rendering logic
};

Clean Architecture Boundaries

"At each architectural boundary, we are likely to find the Humble Object pattern lurking somewhere nearby."

// Domain Layer (Business Rules)
interface PaymentProcessor {
  process(payment: Payment): Promise<PaymentResult>;
}

// Application Layer (Use Cases)
class PaymentService {
  constructor(private processor: PaymentProcessor) {}

  async processPayment(order: Order): Promise<PaymentResult> {
    // Business logic for payment processing
    return this.processor.process({
      amount: order.total,
      currency: order.currency,
      orderId: order.id
    });
  }
}

// Infrastructure Layer (External Services)
class StripePaymentProcessor implements PaymentProcessor {
  constructor(private stripe: Stripe) {}

  async process(payment: Payment): Promise<PaymentResult> {
    const result = await this.stripe.charges.create({
      amount: payment.amount.value,
      currency: payment.currency,
      metadata: { orderId: payment.orderId }
    });
    return this.mapToPaymentResult(result);
  }
}

// Presentation Layer (React Components)
const CheckoutButton: React.FC<{ order: Order }> = ({ order }) => {
  const paymentService = usePaymentService();
  const mutation = useMutation(
    () => paymentService.processPayment(order),
    {
      onSuccess: (result) => {
        // Handle success
      },
      onError: (error) => {
        // Handle error
      }
    }
  );

  return (
    <Button 
      onClick={() => mutation.mutate()} 
      loading={mutation.isLoading}
    >
      Pay Now
    </Button>
  );
};

Testing and Dependency Management

"Don't depend on things you don't need."

Testing and Dependency Management Let's talk about dependencies - specifically, why you shouldn't depend on things you don't need.

// ❌ Hard to Test Component with Direct Dependencies
const UserProfile: React.FC = () => {
  const [user, setUser] = useState<User>();

  useEffect(() => {
    axios.get('/api/user').then(res => setUser(res.data));
  }, []);

  return <div>{user?.name}</div>;
};

// ✅ Testable Component with Injected Dependencies
interface UserProfileProps {
  userService: UserService;
}

const UserProfile: React.FC<UserProfileProps> = ({ userService }) => {
  const { data: user } = useQuery(
    'user',
    () => userService.getCurrentUser()
  );

  return <div>{user?.name}</div>;
};

// Easy to test with mock service
describe('UserProfile', () => {
  it('displays user name', async () => {
    const mockService = {
      getCurrentUser: jest.fn().mockResolvedValue({ name: 'John' })
    };

    render(<UserProfile userService={mockService} />);

    expect(await screen.findByText('John')).toBeInTheDocument();
  });
});

Conclusion

"Good architects are careful to separate details from policy, and then decouple the policy from the details so thoroughly that the policy has no knowledge of the details."

Conclusion Great architects know how to separate details from policy, and then decouple them so thoroughly that the policy has no clue about the details. This guide shows you how to:

Keep your code framework-independent
Make testing a breeze
Handle dependencies like a pro
Separate concerns properly
Build applications that can actually scale

Remember, these aren't rigid rules - they're tools. Use them when they make sense for your project.Want to dive deeper into any of these topics? Just let me know!

This article created with the help of AI using my notes from the Clean Architecture book

How to parse FormData values with Netlify Functions V2

İbrahim Turan — Tue, 16 Jan 2024 20:48:25 +0000

I spend 3 hours trying to understand that. All the blog posts related to this topic do not work. Netlify Functions V2 uses Request API. I used Node.js v20 to parse FormData values in multipart/form-data requests. You can see how easy it is with the example below. This function returns form data values as JSON in response.

export default async function (event) {
  const data = await event.formData();
  const fields = {};

  for (const pair of data.entries()) {
    fields[pair[0]] = pair[1];
  }

  return new Response(JSON.stringify(fields), { status: 200 });
}

I hope this helps you. Have nice coding!

Effortless Animations With `AutoAnimate` in Vue 3

İbrahim Turan — Sat, 04 Mar 2023 19:46:03 +0000

If you work in a startup you will know that you barely have time to implement something properly. Spending time on animation is mostly seen as unnecessary. Also, when you do something without animations on the frontend side, you will always feel like something is missing. As a frontend developer which works in a little startup, I always want to add some little animations as quickly as possible to indicate user when something changes. So, I started to search for options to achieve this because without animations website looks so much pale, like woodwork without polishing.

Recently, I found the AutoAnimate library that aims to animate things almost effortlessly. Also, they support all the major frontend frameworks right now which is awesome. It's like a gem for the tight-schedule startup workers. So, I implement AutoAnimate in all of our frontend projects in one day. I know still so many things are not perfect on the animation side but having little is always better than none. So, today I will share how to implement auto-animate to Vue 3 projects also I will explain some tricks I use for the edge cases.

In this article I will show examples and usage for Vue 3 but for the other frameworks, you can read documentation.

Creating Vue Project

I will use Vue 3, Vite, typescript, and tailwind to demonstrate how to add and use auto-animate. Vue is not necessary you can use it in all the mainstream frontend frameworks that auto-animate supports.

So, let's create and Vue 3 app with create-vue library created by the Vue team. These are my options to create the project.

✔ **Project name:** … auto-animate-example
✔ **Add TypeScript?** … No /  Yes
✔ **Add JSX Support?** …  No  / Yes
✔ **Add Vue Router for Single Page Application development?** …  No  / Yes
✔ **Add Pinia for state management?** …  No  / Yes
✔ **Add Vitest for Unit Testing?** … No /  Yes
✔ **Add an End-to-End Testing Solution?** › No
✔ **Add ESLint for code quality?** … No /  Yes
✔ **Add Prettier for code formatting?** …  No  / Yes

Scaffolding project in .../projects/auto-animate-example...
Done. Now run:
**cd auto-animate-example**
**npm install**
**npm run dev**

Before running it I will add tailwind and auto-animate.

Adding Tailwind

You can add Tailwind with the commands below. When you have done it successfully you will have tailwind.config.js and postcss.config.js files inside the project folder.

npm install -D tailwindcss
npx tailwindcss init

The first thing l will do is update the tailwind.config.js file name to tailwind.config.cjs otherwise they won't work in the Vite project. You should do the same thing for postcss.config.js too. Then, update the tailwind.config.cjs file as shown below so tailwind will search your components to understand which classes are in use and which classes will be pruned.

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [  
  "./index.html",  
    "./src/**/*.{js,ts,jsx,tsx,vue}",  
  ],  
  theme: {  
  extend: {},  
  },  
  plugins: [],  
}

The next thing I will do is remove the src/assets/base.css file and modify src/assets/main.css as shown below. That way I can access all the tailwind classes in the whole project. The main.css file imported main.ts by default so you don't have to import it.

@tailwind base;  
@tailwind components;  
@tailwind utilities;

How `AutoAnimate` Works?

As you can read from the documentation when the listed conditions below happen, your elements going to be animated.

A child is added in the DOM.
A child is removed in the DOM.
A child is moved in the DOM.

Cool thing is, AutoAnimate read user preference about animations with the prefers-reduced-motion setting and disable animations automatically.

Adding AutoAnimate

Lastly, I will add auto-animate to the project after that, I can show you examples of animating things in the project.

npm install @formkit/auto-animate

I will use auto-animate as a global directive so, I need to configure it that way. I always separate libraries that need configuration under the plugins folder to prevent spaghetti code in the main.ts file. Hence, I will create a file named src/plugins/auto-animate.ts to configure auto-animate.

// src/plugins/auto-animate.js file  
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'  
import type { App } from 'vue';  

export default (app: App): App => {  
  return app.use(autoAnimatePlugin);  
};

// main.ts file  
import { createApp } from 'vue'  
import App from './App.vue'  
import initAutoAnimate from '@/plugins/auto-animate';  
import './assets/main.css'  

const app = createApp(App);  

initAutoAnimate(app);  

app.mount('#app');

We are ready to go. So I will run the project with npm run dev command.

I will not bother you with creating components etc. I will just show examples in dummy code if you need details you can see all the examples in the example project that I will share the end of the article.

Examples

Adding/Removing elements to DOM

When you add remove/add new elements dom, means that when you change visibility with v-if. You should add v-auto-animate directive to parent of element that will be animated. This parent element should be always visible otherwise your animation may not run correctly.

<collapse v-auto-animate>  
  <header @click="toggleBody">  
  Header  
  </header>  

 <body v-if="isBodyVisible">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Donec posuere malesuada nulla, vitae congue metus rutrum ac.  
    Aliquam placerat metus consectetur nisi venenatis, eget tristique ligula consectetur.  
    Phasellus quis blandit nulla. Vestibulum tempus lectus elit, sit amet accumsan ligula  
    consectetur sit amet. Phasellus egestas, mi et dapibus pulvinar, ipsum augue vulputate  
    metus, vel suscipit nunc velit id tellus. Vestibulum viverra dolor non euismod malesuada.  
  </body>  
</collapse>

https://res.cloudinary.com/djsydl9fh/image/upload/v1677937200/Articles/f1646cf2-8a86-4063-b405-d9fb659bb8c4_ljzss7.gif

Adding/Removing Item From the List

If you want to animate adding/removing items to list event, you should add v-auto-animate directive to parent of the looped items. That way the library automatically understand changes and animate items when they added or deleted.

<section class="mt-10">
 <div v-auto-animate>  
      <template v-for="item in items" :key="item.title">  
          <item />  
      </template>  
  </div>  

 <div>  
  <button @click="addNew"> Add New </button>  
  <button @click="removeRandom"> Remove random </button>  
 </div>  
</section>

https://res.cloudinary.com/djsydl9fh/image/upload/v1677939127/Articles/bf3b6431-2768-454c-8e6c-fc736647ab77_xyaqei.gif

Change the Sorting of the List

I will use a randomizing function to change the order of list elements to avoid the complexity of changing elements one by one with a button. The animation will be same for both cases just this will little bit long for multi-index jumping.

https://res.cloudinary.com/djsydl9fh/image/upload/v1677949418/Articles/5f4cbfbd-1a22-4937-8551-bab0fe400c2b_ch6dci.gif

Change Duration of Animation

With directive, you can easily override the duration of animation by passing config object to the directive shown below.

<div v-auto-animate="{ duration: 100 }" class="flex flex-col gap-2">
      <template v-for="item in items" :key="item.title">
        <item /> 
      </template>
    </div>

In this example, I override animation duration to 100 ms instead of default value(I don't know default value btw) with v-auto-animate="{ duration: 100 }" code.

Tricky Animations

I would like to list some edge cases I faced with. Most of them are related to html rendering, Vue updates html elements little as possible so adding key to the component forces them to re-render element completely that way they will animate while re-renderin occur.

Sometimes you would like to animate your components when their text changes or image source changes but it will not automatically be detected by auto-animations so you should add key to your HTML element and add v-auto-animate directive to the parent element of it. Then it will fade away with every key change.
If you would like to animate route change you should add unique key to your <router-view /> component like this <router-view :key="$route.fullPath">
Sometimes animation starts with under of other elements if that element doesn't have a background color(cause overlapping) or adds a scrollbar while the animation is running. If you want to prevent this, you should add overflow-hidden to the parent element. That way you don't see animations that occur outside of the element area.

More Examples

I just want to show you some basic things you can do with this library for other examples and use cases you can look at their documentation.

Creating Your Own Animation

Also, AutoAnimation library gives an API to create your own animation or extend/change the default animations it comes with. I won't cover that part in this article but you can read for more details in the documentation.

In conclusion, you can animate all your applications with AutoAnimate quickly and most importantly effortlessly. I shared all the details I know about AutoAnimate. I hope you enjoyed. You can see the example codes with the link below.

Adding PWA to Vite Applications

İbrahim Turan — Fri, 21 Oct 2022 09:43:02 +0000

Hello everyone, I just decided to add PWA ability to my website and I thought why wouldn't I write a blog post about it. I'm using Vite on my website, so I will use vite-plugin-pwa to add PWA ability on my website. This plugin makes things easier when you configure PWA, for example precaching comes with it by default, so instead of making it manually, I decide to use this plugin.

Requirements

vite >= 3
vite-plugin-pwa

What is PWA and Why it's Important?

PWA(aka Progressive Web Apps) is a set of abilities that your website will be like real applications. These abilities are;

Precaching assets of the website until the next deployment.
Sending Push Notifications from website
Adding offline mode ability
Update application silently on the background (While user looking around)
Users able to install your website like applications

How Offline Mode and Silent Update Works?

PWA uses an API called serviceworkes. This serviceworkers works on another thread instead of main JS thread, so they have a set of abilities that we can not do inside main JS thread. For example, with precaching ability, they can download website assets that listed in sw.js file and save them to directly browser. That way, we can use application offline(I assume we don't make any API call inside app). Also, if you configure PWA, you can make precache your API calls too.(You can read details here)

How Serviceworkers Understand the Website Updated?

Actually, it has basic algorithm underlying of it and vite-plugin-pwa handles it for us without any configuration. When you take a build from your project, the plugin scans through your assets files and makes a list of precached files inside sw.js file. If file already exist, plugin adds random revision number to file inside to list, if its new file revision number will null. When you deploy that changes, new sw.js will change with the old one into the browser. If revision numbers are different, the browser will invalidate cache and fetch a new version of them.

Adding PWA Plugin to Project

We have a bunch of steps to add PWA into the project successfully.

Create application icons
Create robot.txt file
Prepare index.html file
Add PWA plugin to project

Create Application Icons

You should have some icons and favicons to use inside of application. They are required to have PWA. So, you should choose an icon to application, then you can convert it to icons that you will use PWA configuration. I used favicon.io to create icons for my website. End of the process you should have these icons;

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico

You should copy these files into the public folder in the project. Lastly, we will copy some of the files with new names into the public folder. You should copy and rename these files listed below. We will use them inside the PWA configuration.

android-chrome-192x192.png → pwa-192x192.png
android-chrome-512x512.png → pwa-512x512.png

Create robots.txt File

You should have robots.txt file if you want to search bots crawl your website. Also, this file necessary if you want to use PWA. You can use seoptimer to create this file. I will use default configuration for this file. Default configuration would be enough for most of the websites. So, if you need default configuration, you can copy the code below and paste it to robots.txt file under public folder.

User-agent: *
Disallow:

After this process, you will have public folder that includes at least these files shown in the image below.

Prepare index.html File

If you want to use PWA, your website should be responsive, have icons, title, description and the manifest file. If you want to achieve this, you should add them into index.html head section. I have shown the codes you should add to the head section below. You can copy and paste to your index.html file. Don't forget to change title, and description :)

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <meta charset="UTF-8" />

     <!-- Fields you will add start   -->  
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
     <title>Website Title</title>  
     <meta name="description" content="Google search description">  
     <meta charset="UTF-8" />
     <link rel="manifest" href="/manifest.webmanifest">
     <link rel="icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">  
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">  
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">  
     <link rel="mask-icon" href="/masked-icon.png" color="#FFFFFF">  
     <meta name="theme-color" content="#ffffff">  
     <!-- Fields you will add end-->

  </head>  
 <body>  
  <div id="app"></div>  
     <script type="module" src="/src/main.js"></script>  
  </body>  
</html>

Add PWA Plugin to Project

Lastly, you will install plugin to project and configure it, then you will ready to use PWA on the website. You can install the plugin with the command below.

npm i vite-plugin-pwa -D

After that, you should define configurations for the plugin inside the vite.config.js. You can see my configurations below. You should add VitePWA function inside plugins array. This function takes an object as parameter which will be configuration for the PWA. Don't forget to update name, short_name and description fields according to your website.

import { defineConfig } from 'vite';  
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({  
  plugins: [  
  VitePWA({  
      registerType: 'prompt',  
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],  
      manifest: {  
  name: 'websitename',  
        short_name: 'websitename',  
        description: 'Website description(Could be same with index.html file)',  
        theme_color: '#ffffff',  
        start_url: '/',  
        icons: [  
  {  
  src: 'pwa-192x192.png',  
            sizes: '192x192',  
            type: 'image/png',  
          },  
          {  
  src: 'pwa-512x512.png',  
            sizes: '512x512',  
            type: 'image/png',  
          },  
          {  
  src: 'pwa-512x512.png',  
            sizes: '512x512',  
            type: 'image/png',  
            purpose: 'any maskable',  
          },  
        ],  
      },  
    }),  
  ],  
});

When you did configurations correctly, you will have manifest.webmanifes, sw.js, registerSW.js and workbox-???.js files inside to build files. If you see this files inside the build output, congratulations, you did all the settings correctly and your website have PWA 🎉

Before deployment you can take a build then preview website with the commands below. If you done configuration preview website will have PWA as well. (Thanks to @finalgirl321 )

npm run build
npm run preview

After deployment, you can check is your PWA working with the lighthouse.

Vite Uygulamasına PWA Özelliği Nasıl Eklenir

İbrahim Turan — Thu, 20 Oct 2022 22:46:53 +0000

Bugun websiteme PWA eklemeye karar verdim. Hazir eklemisken bunu bir makale ile sizle de paylaşmak istedim. Websitemde Vite kullandigim icin, PWA icin vite-plugin-pwa eklentisini kullanacağım. Bu eklenti sayesinde PWA ekleme isi oldukça kolaylaşıyor ve varsayılan olarak precaching özelliği de sağlıyor. Bundan dolayı manuel olarak eklemek yerine eklentiyi kullanmaya karar verdim.

PWA Eklemek İçin Gereksinimler

vite >= 3
vite-plugin-pwa

PWA Nedir ve Neden onemli?

PWA ya da diğer bir değişle Progressive Web Apps, tarayıcı üzerinde kullandığımız websitelerine;

Websitenin assetlerini indirerek hızlı açılmasını ve çalışmasını sağlama
Push Notifications özelliği
Uygulamayı çevrimdışı kullanabilme
Precaching sayesinde arka planda uygulamayı güncelleyebilme
Websitesini masaüstüne/menüye uygulama gibi kısayol olarak ekleyebilme

gibi ekstra olarak bir kaç özellik sunuyor.

Nasıl Çevrimdışı Çalışabiliyor ve Arka Planda Güncelleme Yapabiliyor?

PWA bu özellik için serviceworker denen bir yapı kullanıyor. Service Worker'lar js ile aynı thread'de çalışmadıkları için arka planda çalışıp bir takım işleri halledebiliyorlar. Örneğin, Precaching işlemi ile websitesinin dosyalarını indirip tarayıcı üzerine kaydediyorlar. Bu şekilde uygulama istenirse kısmen de olsa çevrimdışı çalışabiliyor. Gerekli ayarlamaları yaparak precaching içerisine API call isteklerinin verilerini dahi kaydedebiliyorsunuz. Detaylar için bu makaleye göz atabilirsiniz.

Serviceworkers Websitesinin Güncellendiğini Nasıl Anlıyor?

Aslında bunu sağlayan basit bir mekanizma var ve vite-plugin-pwa bunu otomatik olarak hallediyor. Projede build alındıktan sonra pwa dosyaları oluşturuluyorken sw.js dosyası içerisine build sonucunda oluşan dosyalar ve onların revizyon numaraları liste halinde yazılıyor. Eğer vite-pwa dosyanın yeni olduğunu anlarsa ve precache edilmesi gerekiyorsa revizyon numarası null olarak atanıyor direk tarayıcı tarafında precache ediliyor, fakat dosyanın daha önceden aynı isimde dosya var ise ona rastgele bir revision numarası atıyor. Tarayıcı tarafında ise sw.js dosyası güncelleniyor ve yeni dosyadaki revizyon numarası farklı ise bu dosyalar silinip sunucudan yeni hali alınıyor.

PWA Eklenti Kutuphanesinin Kurulumu

Oncelikli olarak projeye PWA eklemek icin gerekli olan Vite projesine PWA eklemek islemini bir kac adimda tamamlayacagiz. Bu adimlari;

Uygulama ikon dosyalarının oluşturulması
Robots.txt dosyasının oluşturulması
Index.html dosyasının hazırlanması
PWA eklentisinin ayarlanması

olarak sıralayabiliriz.

Uygulama Ikon Dosyalarının Oluşturulması

İkonları oluşturmak için https://favicon.io/ sitesini kullanabilirsiniz. Siteden ikonları oluşturduktan sonra elinizde;

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico

dosyaları olması gerekiyor. Bu dosyaları projenin içerisinde yer alan public klasörü içerisine kopyalamanız gerekiyor. Sonrasında ise aşağıdaki dosyaları kopyalarak, yeni isimleri ile aynı yere kaydetmeniz gerekiyor. Bu dosyaları manifest dosyası ve index.html içerisinde kullanacağız.

android-chrome-192x192.png -> pwa-192x192.png
android-chrome-512x512.png -> pwa-512x512.png

Robots.txt Dosyasının Olusuturlmasi

Botların websitesini analiz edebilmesi ve PWA kullanabilmek için robots.txt oluşturmanız gerekiyor. seoptimer yardımıyla kolaylıkla oluşturabilirsiniz. Benim projemde default dosya yeterli oluyor, çoğu proje için iş görecektir bundan dolayı public klasörü içerisinde robots.txt dosyası olusutup aşağıdaki kodları içerisine kopyalayabilirsiniz.

User-agent: *
Disallow:

Tüm bu işlemlerin arından public klasörü bu şekilde olmalı.

Index.html Dosyasının Hazırlanması

Projer içerisindeki ındex.html dosyası içerisine yukarıda oluşturduğumuz ikon dosyalarını ve mobil uyumlu olabilmesi için gerekli head tag'lerini eklememiz gerekiyor. Aşağıdaki örnekte eklenmesi gereken alanları gösterdim. manifest.webmanifest dosyasını olsturmayi unuttuk derseniz, merak etmeyin eklenti onu otomatik olarak oluşturacak. Eklerken başlığını ve açıklamasını değiştirmeyi unutmayın :)

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <meta charset="UTF-8" />

     <!-- EKlenmesi Gereken Alanlar Baslangic   -->  
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
     <title>Google Aramasinda gozukmesini istediginiz baslik</title>  
     <meta name="description" content="Google aramasinda gozukmesini istediginiz aciklama">  
     <meta charset="UTF-8" />
     <link rel="manifest" href="/manifest.webmanifest">
     <link rel="icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">  
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">  
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">  
     <link rel="mask-icon" href="/masked-icon.png" color="#FFFFFF">  
     <meta name="theme-color" content="#ffffff">  
     <!-- EKlenmesi Gereken Alanlar Bitis   -->

  </head>  
 <body>  
  <div id="app"></div>  
     <script type="module" src="/src/main.js"></script>  
  </body>  
</html>

PWA Eklentisinin Ayarlanması

Bir sonraki adım olarak ise proje içerisine vite-plugin-pwa kütüphanesini eklememiz gerekiyor. Aşağıdaki komut ile projenize pwa eklentisini kurmanız gerekiyor.

npm i vite-plugin-pwa -D

Sonrasinda ise vite.config.js dosyasina kutuphaneyi ekleyerek ayarlari yapmak gerekiyor. Plugins arrayi icerisine VitePWA'yi ekledikten sonra icerisine gerekli manifest dosyasini ve ayarlari ekliyoruz. name, short_name ve description alanlarini websitesine gore guncellemeniz gerekiyor.

import { defineConfig } from 'vite';  
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({  
  plugins: [  
  VitePWA({  
      registerType: 'prompt',  
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],  
      manifest: {  
  name: 'siteismi',  
        short_name: 'siteismi',  
        description: 'Site aciklamasi (index.html icerisindekini kullanabilirsiniz)',  
        theme_color: '#ffffff',  
        start_url: '/',  
        icons: [  
  {  
  src: 'pwa-192x192.png',  
            sizes: '192x192',  
            type: 'image/png',  
          },  
          {  
  src: 'pwa-512x512.png',  
            sizes: '512x512',  
            type: 'image/png',  
          },  
          {  
  src: 'pwa-512x512.png',  
            sizes: '512x512',  
            type: 'image/png',  
            purpose: 'any maskable',  
          },  
        ],  
      },  
    }),  
  ],  
});

Bu işlemi de başarılı şekilde tamamlayıp build alırsanız, vite-plugin-pwa otomatik olarak manifest.webmanifest, sw.js, registerSW.js ve workbox-???.js dosyalarını build dosyalarının içerisine eklediğini göreceksiniz. Eğer dosyalar oluşturulmuş ise tebrikler, sitenize başarılı şekilde PWA eklediniz 🎉 Projeyi deploy ettikten sonra Lighthouse üzerinden, PWA'nin çalışıp çalışmadığını kontrol edebilirsiniz.

Bazı Dosyaların PWA Tarafından Precache Edilmesini Istemiyorum

Bazı durumlarda server içerisinde bulunan tüm dosyaların cache edilmesini istemeyebilirsiniz. Örneğin, CDN server içerisinde sitenizde kullandığınız bir PDF dosyası bulunuyor, bu dosyayı sık sık güncelliyor fakat her güncellemede deploy yapmıyorsanız bazı kullanıcıların hala eski dosyayı görmekte olduğunu göreceksiniz. Bu durumun önüne geçmek için vite.config.js dosyasında bulunan PWA ayarlarını guncellememiz gerekiyor. Bu sayede serviceworker'lara bu dosyayı precache etmemesi gerektiğini soylebiliyorsunuz. Örneğin, sadece js ve css dosyalarının precache edilmesini istiyorsanız ayarlarınızı aşağıdaki gibi güncelleyebilirsiniz.

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: 'ibrahimturan',
        short_name: 'ibrahimturan',
        description: 'I\'m Ibrahim, working as Frontend Developer almost 3 years. Interest everything related to software. Like being practical and work solution oriented. Have high communications skills and always curious about the cutting-edge technologies.',
        theme_color: '#ffffff',
        start_url: '/',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable',
          },
        ],
      },
      // Bu ayar sayesinde sadece js, css ve index.html dosyalari precahe oluyor.
      workbox: {
        globPatterns: ['**/*.{js,css}', 'index.html'],
      },
    }),
  ],
});

How to prevent Chrome form auto fill on Vue?

İbrahim Turan — Sat, 05 Dec 2020 12:21:00 +0000

When you logged in website, Chrome ask that do you want to save credentials for next visiting. If you accept that, Chrome saves your password then fill every password field(fields which types set as password) with your password on the web site.

This is expected behavior of this feature but sometimes comes annoying to users. For example in web site you have a field for API secret key and you decided to make that field type as password for security then Chrome thinks, this is login form and filling with your credential to form automatically. Today I will show how to prevent this behavior.

I made researches about how to prevent this behavior but answers or libraries I found for this behavior won't worked. So I decided to make my implementation and share with it.

Reason of That Behavior

As I mentioned before when form has password field and you saved your credentials to Chrome for that web site, Chrome things that, you are attempting to login this web site and fills every password field automatically.

Solution

Solution I found is very simple. I will implement with Vue on article but I think it could be easily implemented with React as well. My solution has 3 steps;

Settype='text' and add autocomplete="off" to all inputs in form for initial render.
When user focused password field, change field type as password
If user blur the input with empty value change input type as text.

Implementation in Vue

I will pass through application setup steps. I created to vue 2 app with default settings. Then added to simple login form on src/App.vue file shown below.

<template>
  <div id="app">
    <div v-if="isloggedin" class="welcome">
      Welcome {{username}}
    </div>
    <div v-else id="form-wrapper">
      <label for="username">Username: </label>
      <input
        v-model="username" 
        class="form-input" 
        type="text" 
        name="username" 
        value=""
      />
      <label for="password">Password: </label>
      <input 
        v-model="password"
        class="form-input"
        type="password"
        name="password"
        value=""
      />
      <button class="block" type="button" @click="saveCredentials">
        Submit Form
      </button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      username: '',
      password: '',
      isloggedin: false
    }
  },
  methods: {
    saveCredentials() {
      this.isloggedin = true;
    }
  }
}
</script>

<style>
#app {
  display: flex;
  flex: 1;
  height: 100vh;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#form-wrapper {
  flex-shrink: 1;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.form-input {
  margin: 4px 0px;
}

.block {
  width: 100%;
}
</style>

Assume that we visited and login this web site before and saved credentials to Chrome. On next visit to site the login form will looks like shown below.

To prevent this behavior, firstly we need to set input types as reactive and hold it in state. For initial render we need to set as text to input type.

<input 
  v-model="password"
  class="form-input"
  :type="fieldTypes.password" // change this as reactive
  name="password"
  value=""
/>

data() {
  return {
    username: '',
    password: '',
    isloggedin: false,
    fieldTypes: { // add this for change input type
      password: 'text',
    }
  }
},

Then need to add @focus and @blur events to password input and trigger callback function for that events.

<input 
  v-model="password"
  class="form-input"
  :type="fieldTypes.password"
  name="password"
  value=""
  @focus="handleType"
  @blur="handleType"
/>

handleType(event) {
  const { srcElement, type } = event;
  const { name, value } = srcElement;

  if(type === 'blur' && !value) {
    this.fieldTypes[name] = 'text'
  } else {
    this.fieldTypes[name] = 'password'
  }
}

Lastly to prevent chrome suggestions we need to add autocomplete="off" to all inputs. You could add autocomplete="new-password" to password field for strong password suggestions from browser. The final password field code looks like shown above.

<input 
  v-model="password"
  class="form-input"
  :type="fieldTypes.password"
  name="password"
  value=""
  @focus="handleType"
  @blur="handleType"
  autocomplete="off"
/>

After all the final version of App.vue looks like this.

<template>
  <div id="app">
    <div v-if="isloggedin" class="welcome">
      Welcome {{username}}
    </div>
    <div v-else id="form-wrapper">
      <label for="username">Username: </label>
      <input
        v-model="username" 
        class="form-input" 
        type="text" 
        name="username" 
        value=""
        autocomplete="off"
      />
      <label for="password">Password: </label>
      <input 
        v-model="password"
        class="form-input"
        :type="fieldTypes.password"
        name="password"
        value=""
        @focus="handleType"
        @blur="handleType"
        autocomplete="off"
      />
      <button class="block" type="button" @click="saveCredentials">
        Submit Form
      </button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      username: '',
      password: '',
      isloggedin: false,
      fieldTypes: {
        password: 'text',
      }
    }
  },
  methods: {
    saveCredentials() {
      this.isloggedin = true;
    },
    handleType(event) {
      const { srcElement, type } = event;
      const { name, value } = srcElement;

      if(type === 'blur' && !value) {
        this.fieldTypes[name] = 'text'
      } else {
        this.fieldTypes[name] = 'password'
      }
    }
  }
}
</script>

<style>
#app {
  display: flex;
  flex: 1;
  height: 100vh;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#form-wrapper {
  flex-shrink: 1;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.form-input {
  margin: 4px 0px;
}

.block {
  width: 100%;
}
</style>