По -прежнему.
2 июля 2025 г.Когда дело доходит до сложной разработки веб -приложений на Frontend, мы часто сталкиваемся с необходимостью реализации функций с использованием ванильного JavaScript - будь то для прямых манипуляций с DOM или интеграции конкретного плагина JQuery. Иногда реализация от скрещивания с использованием простых HTML, CSS и ванильного JavaScript является лучшим (или единственным) выбором.
Что еще
Still.js - это современная структура с открытым исходным кодом, которая предлагает те же возможности, что и Angular, React и Vue - без отказа от ванильного JavaScript.
Из -за его чистого подхода JS,По -прежнему:
- Не требует предварительной обработки
- Не зависит от бундлеров, таких как WebPack или VITE
- Идеально подходит для команд и разработчиков, которые предпочитают прямой доступ к нативным веб-технологиям без каких-либо компромиссов в дополнение к этим современным функциям, предоставляемым веб-структурой.
Проверьте это:
- Посещатьintlejs.devилиGitHub Page
- ВидетьYouTube Playlist
- Присоединяйтесь и обсудитьКанал раздора
- По -прежнему.GitHub Repo
Подходит для сложных и корпоративных приложений
Веб-приложения корпоративного уровня требуют не только богатых функций пользовательского интерфейса. Они требуют:modularizationВuser permission managementВcomponent routingВvalidationВseparation of concernВcommunication managementВMicro-frontend architecture(например, встроение и взаимодействие фронта) и многое другое.
Тем не менее.
Некоторые образцы кода
Примечание: они будут работать только вПо -прежнемуПроект с правильной настройкой, которая подробно объяснена в официальной документации.
Базовый компонент:
Bellow - это простой компонент, реализующий счетчик, несмотря на то, что шаблон помещается внутри класса, его можно перемещать в файл .html, который подходит для сложных приложений.
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
export class CounterComponent extends ViewComponent {
isPublic = true;
count = 0;
template = `
<div>
<p>My counter state is @count</p>
<button (click)="increment()">Increment (@count)</button>
</div>
`;
increment() {
this.count = this.count.value + 1;
}
}
Основное управление авторизацией пользователя
В реализации Bellow мы заявляем, что некоторые компоненты не будут доступны пользователю, это может быть сделано с помощью правильной бизнес -логики в соответствии с проверкой ролей пользователя.
import { StillAppMixin } from "./@still/component/super/AppMixin.js";
import { Components } from "./@still/setup/components.js";
import { AppTemplate } from "./app-template.js";
import { CheckingAccount } from "./app/components/BankAccount/CheckingAccount.js";
import { NewAccountForm } from "./app/components/BankAccount/NewAccountForm.js";
import { SavingAccount } from "./app/components/BankAccount/SavingAccount.js";
export class StillAppSetup extends StillAppMixin(Components) {
constructor() {
super();
//Bellow the entry point component is being set
this.setHomeComponent(NewAccountForm);
const blackListComponents = [SavingAccount, CheckingAccount];
//Make components black-listed by passing it to setBlackList App configuration
this.setBlackList(blackListComponents);
}
async init() {
return await AppTemplate.newApp();
}
}
Основная проверка формы
Illce.js предоставляет встроенные валидаторы, но пользовательские могут быть реализованы без усилий.
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
export class BasicForm extends ViewComponent {
isPublic = true;
firstName = '';
shoeSize;
template = `
<div>
<form>
<div class="form-group">
<label>Shoe Size</label>
<input
(value)="shoeSize"
(validator)="number"
(validator-warn)="Invalid shoe size, number is required"
placeholder="Enter valid shoe size"
>
</div>
</form>
</div>
`;
}
Глобальное государственное управление
Сервис служит для реализации глобального реактивного хранения и потока данных (например, HTTP -запросов). Путь служб может быть установлен на уровне приложения, и мы можем переопределить для конкретного обслуживания с@Pathаннотация.
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { CustomersService } from "../../service/api/CustomersService.js";
export class BiddingDisplay extends ViewComponent {
isPublic = true;
/** Service declaration, will get injected automatically due to Inject anottation
* from the specified Path path due to the annotation
* @Inject
* @Path service/api/
* @type { CustomersService } */
custService;
template = `<div></div>`;
/** Component Hook which takes place when it's completly render and startder */
stAfterInit() {
this.custService.customerList.onChange((newValue) => {
console.log('Ths customerList store got updated with: ', newValue);
});
}
}
Поторопись, начните себя с Still.js
Внести свой вклад в проект, как вы можете, проверьтеРепозиторий GitHub
По -прежнемудоступен через NPM на @illyjs/cli. СмотретьYouTube ▶ ️ плейлистИ терпите более грядущие.
Смотреть этоУчебное пособие по приложению Tudo на YouTube▶ ️, клонировать или загрузить предоставленныеApp Project GitHub Todoи бежать на месте. Это демонстрирует ключевые понятия, какcomponent communicationВevent and state bindingВreactive updatesВ@Proxy, иcomponent stylingПолем
Подключите и поделитесь отзывами оКанал раздораПолем
Оригинал