Я пересобрал Backbone.js без jQuery и Underscore. Теперь он использует классы, TypeScript и ES модули

TL;DR: Backbone.js — это легенда фронтенда, но его зависимость от jQuery и Underscore делает его устаревшим. Я переписал его, используя современные подходы: ES6 классы, TypeScript и ES модули. Теперь он легче, быстрее и соответствует современным стандартам.

Введение: Почему Backbone.js нуждается в обновлении?

Backbone.js был одним из первых фреймворков для фронтенда, который предложил структуру для SPA (Single Page Applications). Однако его зависимость от jQuery и Underscore делает его менее актуальным в эпоху современных браузеров и стандартов ECMAScript. Современные проекты требуют модульности, типизации и производительности, которые Backbone.js в его классическом виде не может предложить.

В этой статье я расскажу, как я переписал Backbone.js, отказавшись от jQuery и Underscore, и интегрировал современные технологии, такие как ES6 классы, TypeScript и ES модули.

Основная часть: Переписываем Backbone.js с нуля

1. Отказ от jQuery

jQuery был необходим для кросс-браузерной совместимости и работы с DOM. Однако современные браузеры поддерживают нативные методы, такие как querySelector, addEventListener и fetch. Заменим jQuery на нативные методы:

// Старый код с jQuery
this.$el.find('.element').hide();

// Новый код с нативными методами
this.el.querySelector('.element').style.display = 'none';

2. Отказ от Underscore

Underscore предоставлял полезные функции для работы с массивами и объектами. ES6 и более новые версии JavaScript предлагают аналогичные возможности:

// Старый код с Underscore
_.each([1, 2, 3], function(num) { console.log(num); });

// Новый код с ES6
[1, 2, 3].forEach(num => console.log(num));

3. Использование ES6 классов

Backbone.js использовал прототипное наследование, что делало код менее читаемым. Перепишем модели и представления с использованием ES6 классов:

// Старый код с Backbone
const MyModel = Backbone.Model.extend({
  defaults: {
    name: 'Default Name'
  }
});

// Новый код с ES6 классами
class MyModel extends Backbone.Model {
  defaults() {
    return {
      name: 'Default Name'
    };
  }
}

4. Интеграция TypeScript

TypeScript добавляет статическую типизацию, что улучшает качество кода и упрощает разработку. Определим интерфейсы и типы для моделей и представлений:

interface User {
  id: number;
  name: string;
}

class UserModel extends Backbone.Model {
  defaults(): User {
    return {
      id: 0,
      name: 'Default Name'
    };
  }
}

5. Использование ES модулей

ES модули позволяют организовать код в независимые модули, что упрощает его поддержку и масштабирование:

// Модуль модели
export class UserModel extends Backbone.Model {
  defaults() {
    return {
      id: 0,
      name: 'Default Name'
    };
  }
}

// Модуль представления
import { UserModel } from './UserModel';

export class UserView extends Backbone.View {
  model: UserModel;
}

Практическое применение: Как использовать новый Backbone.js

1. Установка: Новый Backbone.js можно установить через npm:

   npm install ostovjs
   

2. Создание моделей и представлений:

   import { Model, View } from 'ostovjs';
   
   class User extends Model {
     defaults() {
       return { name: 'John Doe' };
     }
   }
   
   class UserView extends View {
     render() {
       this.el.innerHTML = `<h1>${this.model.get('name')}</h1>`;
       return this;
     }
   }
   

3. Роутинг и события:

   import { Router } from 'ostovjs';
   
   const AppRouter = Router.extend({
     routes: {
       '': 'home'
     },
     home() {
       console.log('Home page');
     }
   });
   
   new AppRouter();
   

Заключение: Почему это важно?

Переписывание Backbone.js с использованием современных технологий — это не только дань уважения легенде фронтенда, но и шаг вперед для сообщества. Теперь он соответствует современным стандартам, что делает его подходящим для новых проектов. Это также демонстрирует, как можно адаптировать старые фреймворки к новым реалиям, сохраняя их преимущества и устраняя недостатки.

Попробуйте новый Backbone.js в своих проектах и делитесь впечатлениями!

Источник: https://github.com/DmitryOlkhovoi/Ostov