Русский
Русский
English
Статистика
Реклама

Webframeworks

Перевод Чем фрагменты могут помочь в Веб-разработке на примере Malina.js

01.08.2020 22:22:07 | Автор: admin


Никто не спрашивает зачем нужны функции, ведь это очевидная и полезная вешь в программировании. Функции позволяют переиспользовать код и делать архитектуру приложения лучше.

Почему бы не использовать такую же способность в шаблонах компонентов. В настоящее время многие фреймворки позволяют использовать компоненты внутри других компонентов. Но это больше похоже на подключение модуля, нежели просто функции. Ведь компонент кроме шаблона может иметь свой JavaScript код, свои стили и он весьма изолирован (что хорошо).

На этот случай в Malina.js есть как бы функции для шаблонов fragment, они повзоляют переиспользовать разные фрагменты шаблона, они гораздо легче компонетов, их не нужно выносить в отдельный файл (что зачастую необходимо с компонентами), и они обладают некоторыми особенностями которые есть у обычных функций, напрмер рекурсия и замыкания, потому что фрагмент в результате компиллируется в обычную функцию.

1. Переиспользование фрагмента шаблона


Когда вы рабрабатываете шаблон компоненета, особенно если это форма, элементы ввода, панельки и т.п., у вас может быть повторяющиеся блоки, которые могли бы быть переиспользованы. Ниже кусок шаблона из js-framework-benchmark, в котором есть ряд одинаковых кнопок:


С использованием fragment это может выглядеть так:

Тут объявлен фрагмент button с двумя аргументами id, name, и проброс события click от кнопки @click. Данный ряд кнопок можно было сделать с помощю директивы for/each, но фрагмент может использоватся не только в одну линию.

2. Замыкания


Т.к. фрагмент компиллируется в функцию, значит он может быть объявлен почти где угодно, хоть внутри цикла for/each, таким образом он может использовать замыкания. В примере ниже фрагмент box имеет аргумент text, замкнутую переменную color из цикла, и ссылку на функцию click из корня компонента, которая вызывается при клике: @click={click(text, color)}


3. Рекурсия


Fragment может вызывать сам себя что повзоляет делать рекурсию и строить деревья, так же fragment может распологаться внинзу компонента, т.к. в JavaScript функция доступна по всей (текущей) области видимости, даже если объявлена в конце.
Ниже пример фрагмента draw который вызывает сам себя и строит дерево:


Заключение


Fragment это легковестный кусок шаблона который можно переиспользовать внутри компонента, он помогает сделать компонент более компактным с лучшей структурой.

Все примеры можно попробовать в online редакторе REPL, примеры в gist.

Спасибо за внимание.
Подробнее..

Пять причин, по которым следует использовать Apache Wicket

01.01.2021 20:09:47 | Автор: admin

Apache Wicket - это фреймворк для веб-разработки на Java. Я чувствую, что ему не уделяют столько внимания, сколько он того заслуживает. Я профессионально использую Wicket для реальных проектов последние 6 лет и мне это нравится! В этом посте давайте рассмотрим пять причин, по которым вам стоит подумать об его использовании.

1. Простое управление состоянием

Опыт разработки приложений Wicket очень похож на разработку для настольных компьютеров. Иногда вы можете почти забыть о том, чтоб вы работаете с HTTP, т.к. нет необходимости сохранять состояния. Это связано с тем, что в Wicket веб-страница и все ее компоненты (кнопки, текстовые поля и т. д.) Являются объектами Java, которые поддерживают свое собственное состояние. Состояние компонентов сериализуется в сеансе пользователя и десериализуется в нужное время.

Проще говоря, предположим, что у вас есть форма с полями, которые пользователь заполняет и отправляет. В приложении Wicket эта форма, ее поля и кнопка отправки являются компонентами (объектами Java), которые создаются и добавляются на веб-страницу. При нажатии кнопки отправки:

1.У нас автоматически есть доступ к вводу пользователя, обычно в виде полей POJO.

2.Нам не нужно связывать запрос HTTP POST с запросом GET.

Нам также не нужно думать о заполнении полей формы отправленными значениями. Это делается с помощью моделей, которые являются основной концепцией Wicket.

2. Стандартная интеграция HTML

HTML в Wicket не требует каких-либо специальных тегов, в отличие от некоторых других фреймворков. Фактически, вы можете взять любой существующий HTML и интегрировать его с вашим приложением Wicket практически без изменений. Для подключения HTML-тегов к компонентам Wicket необходим только один атрибут: wicket: id Рассмотрим пример:

<div wicket:id="userName">Roman</div>add(new Label("userName", getUsername()));

wicket:id "userName" используется для подключения HTML элемента с компонентом Wicket. Компонент Wicket Label получит имя пользователя и отобразит div тег . Ничего страшного, если сейчас это не совсем понятно. Это становится привычным и интуитивно понятным, когда вы начинаете экспериментировать с ним. Компоненты Wicket являются объектами первого класса и могут инкапсулировать собственную разметку HTML / CSS / JS, как в некоторых популярных фреймворках, таких как React. Это позволяет нам создавать код, который можно многократно использовать.

3. Не требуется Javascript (по большей части)

В какой-то момент вы закончите писать код JS. Поддержка AJAX, предоставляемая Wicket, означает, что вам не нужно писать собственный JS-код для наиболее распространенных задач. За кулисами Wicket использует JQuery и автоматически генерирует JS-код на веб-странице. Давайте рассмотрим для примера страницу с раскрывающимся списком и различными другими компонентами, которые зависят от выбора этого раскрывающегося списка. Когда выбор изменяется, нам нужно обновить эти различные другие компоненты на странице. На самом деле для этого не требуется код Javascript . Это делает Wicket идеальным решением для создания сложных интерфейсов со сложной бизнес-логикой.

4. Система событий / сообщений

События Wicket - это способ взаимодействия компонентов и страниц между собой. Используя эту функцию, мы можем создавать очень сложные, но не связанные друг с другом структуры компонентов. Компонент может транслировать сообщение, не зная, кто его получит. Когда компонент заинтересован в конкретном типе сообщения, он может просто подписаться, чтобы получать уведомление, когда это сообщение будет транслироваться. Компонент может транслировать событие критического обновления с полезной нагрузкой всем другим компонентам на странице следующим образом:

send(getPage(), Broadcast.BREADTH, new CriticalUpdate(target, payload));

И если какой-то компонент заинтересован в получении CriticalUpdate , он будет регистрироваться следующим образом:

public void onEvent(IEvent event) {    if (event.getPayload() instanceof CriticalUpdate) {       String msg = ((CriticalUpdate)event.getPayload());       //do something with the msg      } }

5. Модульное тестирование

Компонентный / сохраняющий состояние характер Wicket означает, что мы можем писать модульные тесты для внешнего интерфейса так же, как мы пишем их для уровня сервиса или нашего уровня доступа к данным. Wicket предоставляет полезные утилиты, упрощающие написание модульных тестов. Давайте рассмотрим пример простого сценария, который может оказаться не таким простым для тестирования в других средах. У нас есть веб-страница с интерфейсом CRUD: таблица с именами и кнопками удаления. Форма с текстовым полем и кнопкой для добавления новых строк в таблицу. Мы можем написать тест, который отобразит страницу, имитирует заполнение и отправку формы пользователем, обеспечит правильное обновление таблицы, имитирует нажатие кнопки удаления пользователем и так далее. Все это может быть выполнено с использованием чистого кода Java и JUnit, не прибегая к Selenium, Puppeteer или аналогичным библиотекам.

Заключение

Надеюсь, вы услышали достаточно, чтобы попробовать Wicket. Если вам интересно узнать больше:

  1. Перейдите на официальный сайт, где есть отличная документация.

  2. Взгляните на примеры кода часто встречающихся практик в веб-разработке.

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru