Наскоро бях изправен пред предизвикателството да създам един компонент с помощта на платформата OutSystems.
Исках да внеса нещо ново в отвореното хранилище на общността на Forge — OutSystems за повторно използваеми приложни модули, конектори и компоненти, които ускоряват доставката на приложения.
Като уеб разработчик Искам да съм в крак и да използвам най-новите тенденции в индустрията, така че защо да не разработя нещо ново?

1. Търсенето

Какъв полезен компонент липсваше в OutSystems Forge? Как бих могъл да допринеса с нещо, което ще помогне на други разработчици? Всъщност това пътуване за намиране на цел беше по-отнемащо време от действителното време, което отделих за разработване на самия компонент.

По време на моето проучване намерих статия, която описва #5 различни техники за зареждане на изображения ефективно и асинхронно (няколко уебсайта използват този подход, включително, например, Medium), трябва да сте забелязали как Medium зарежда основното изображение вътре в публикация:

Първото нещо, което виждате, е замъглено копие с ниска разделителна способност на изображението, докато неговата версия с висока разделителна способност се зарежда бавно.

2. Как да доставяме

Сега, след като най-накрая бях решил какво ще доставя, трябваше да реша как да доставя и да избера решението, което ще приложи мързеливо зареждане и което ще бъде най-подходящото за интегриране с платформата OutSystems.

[be]-Lazy.js отговаря на всичките ми изисквания и дори повече:

  • Мързеливо зареждане както на вградени изображения, така и на фонови изображения
  • Сервирайте различни изображения според размера на екрана и екрани с висока разделителна способност
  • Мързеливо зареждане на всичко с атрибут src, напр. iframes, HTML5 видеоклипове, скриптове, unity игри и др.
  • Мързеливо зареждане на изображения в контейнер за превъртане
  • Поддръжка на наследени браузъри, обратно към IE7 и IE8
  • Използвайте CDN, така че нямате нужда от [be]-Lazyхостван на вашия сървър.

Целият [be]-Lazy скрипт е напълно безплатен за изтегляне, използване и редактиране, както сметнете за добре! Работи във всички съвременни браузъри и дори се поддържа от IE7+ на Microsoft.

[be]-Lazy изисква само един файл и той може да бъде минимизиран до размер ~1KB. Ако имате страница с много изображения, тогава смятам, че този скрипт ще ви спести повече от 1KB на зареждане на страница!

Документацията и примерите за използване на тази добавка бяха важни фактори при вземането на решение, но ключовият фактор беше нейната простота: няколко реда javascript, никакви зависимости и никакви сложни CSS трикове.

Тъй като компонентът ще бъде наличен в OutSystems Forge, можем да предвидим, че той ще се използва в множество приложения, а при различни случаи на употреба по-простото винаги е по-добро. Определено не исках да създам сложно решение, което включва итерация на елементи (следният код беше извлечен от техниката №1 на Дейвид Уолш Simple Image Lazy Load and Fade):

[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

Решението трябва да е безупречно и да не натрапва останалите елементи на страницата.

3. Контролен списък с насоки

Успешното създаване на компонент включва (*):

- Определяне на предназначението му.

- Проектиране на API и логика, които поддържат основните сценарии.

- Дефиниране на презентацията, като й дадете правилните имена и икони, например.

- Следване на набор от най-добри практики, които подобряват изживяването при повторна употреба и поддръжка.

- Уверете се, че покривате нефункционални изисквания като производителност, мащабируемост и сигурност

* Извлечено от OutSystems блог

Можете да прочетете разширената версия в Пълно ръководство за създаване на компоненти.

4. Доставяне

След като открих целта на новия компонент (това ми отне известно време), останалото стана лесно от платформата с нисък код!

  • Аз опаковах[be]-Lazyjavascript (една версия с CDN и друга препратка към самостоятелно хостване js — исках да запазя и двете опции, за да не ограничавам никаква възможност ), това води до два уеб блока.
  • Аз създадохприспособлението, за да свържа маркера ‹img› с [be]-Lazy JS, в нов уеб блок
  • Прегледахкода, за да отговоря на очакванията за повторна употреба и най-добри практики:

Създадох извадка (в ново Blazy_Sample eSpace). По този начин всеки, който иска да използва повторно този компонент, ще знае точно как да го използва.

Уверих се, че иконите и описанията са на мястото си и накрая качих компонента. Вече е наличен в Forge.

Да видим как „общността“ реагира на това!

Надявам се да получа заявки от разработчиците на OutSystems да се присъединят към моя екип, за да можем да добавим още опции и да го направим приложим за повече случаи на употреба (в момента позволява само лениво зареждане на изображения, необходима е повече работа за лениво зареждане на iframes или HTML5 видеоклипове).

Нов сте в OutSystems?

Можете сами да опитате нисък код с OutSystems. „Започнете безплатно“, като следвате уроци и се научете да създавате уеб и междуплатформени мобилни приложения за част от времето, с което сте свикнали.