React, Web Components, Angular і jQuery — друзі навіки. Універсальні JavaScript-компоненти

image
Ця стаття про те, як написати універсальний JavaScript-компонент, який можна буде використовувати
  • як React-компонент;
  • як Preact-компонент;
  • як Angular-компонент;
  • як Web Component;
  • jQuery функцію для рендеринга в DOMElement;
  • як нативну функцію для рендеринга в DOMElement.
Навіщо і кому це потрібно
Світ JavaScript-розробки дуже фрагментований. Є десятки популярних фреймворків, велика частина з яких абсолютно несумісні один з одним. В таких умовах розробники JavaScript-компонентів і бібліотек, вибираючи один конкретний фреймворк, автоматично відмовляються від дуже великої аудиторії, що даний фреймворк не використовує. Це серйозна проблема, і в статті запропоновано її рішення.
Читати далі →

Canvas Gauges 2.0

image

Вітаю! У сьогоднішньому пості хочу розповісти вам про оновлення своєї бібліотеки вимірювальних приладів до версії 2 і про всіх тих змінах, які тепер доступні публіці.
Як і раніше, бібліотека OpenSource і розповсюджується за ліцензією MIT, так що беріть, використовуйте і, взагалі, далайте що хочете без будь-яких обмежень.

Читати далі →

Дозвольте представити, Shadow DOM API на основі слотів

Пропоную вашій увазі переклад статті «Introducing Slot-Based Shadow DOM API» автора Ryosuke Niwa, написану ним у блозі WebKit восени минулого року.

Ми раді анонсувати що базова підтримка нового Shadow DOM API на основі слотів, яку ми пропонували у квітні (прим. перекладача: мова йде про квітні 2015) вже доступна в нічних збірках WebKit після r190680. Shadow DOM це частина Веб Компонентів – набору специфікацій, спочатку запропонованих Google для того, щоб зробити можливим створення переиспользуемых віджетів і компонентів у вебі. Shadow DOM, зокрема, надає легку інкапсуляцію DOM дерева, дозволяючи створювати на елементі паралельне дерево, так званий «тіньовий shadow дерево», за допомогою якого змінюється відображення елемента без зміни DOM. Користувачі такого компонента не зможуть ненароком щось у ньому змінити, адже його shadow дерево не є звичним нащадком елемента-хоста. Крім того, дія стилів також обмежена областю дії (scope), а значить CSS правила, оголошені зовні shadow дерева не застосовуються до елементів всередині такого дерева, а правила, оголошені всередині – до елементів зовні.

Читати далі →

Превью перших оновлень веб-платформи Microsoft Edge



Днями ми вивели наш портал для розробників Microsoft Edge Dev з бета-статусу, і тепер перенаправляємо весь трафік зі status.modern.ie на нову сторінку зі статусом платформи, яку ми суттєво прискорили і візуально підчистили.

Сьогодні ми раді розповісти вам перші деталі про майбутню хвилю оновлення функціональності веб-платформи Microsoft Edge. Почнемо з розповіді про те, які нові можливості зараз знаходяться в розробці для EdgeHTML.

Читати далі →

Dojo 2

Dojo 2 уточнює і розширює оригінальні інтерфейси Dojo, видаляючи застарілі функції та узгоджуючи термінологію згідно з доповненнями, внесеними ECMAScript з моменту первинного випуску Dojo в 2004 році. Мета Dojo 2 це підтримка тільки ECMAScript 5+. Так, особливості, які були в Dojo 1 і які стали частиною специфікації ECMAScript, були видалені з фреймворка.

Dojo 2 написаний на TypeScript. Це дозволяє користувачам Dojo скористатися перевагами додаткової статичної типізації і дозволяє Dojo бути опублікованими в AMD, CommonJS і ES6 форматі модулів для використання з нативними модульними системами в будь-якому сучасному оточенні.
image

Читати далі →

Впровадження компонентого підходу в вебі: огляд веб-компонент



Чотири з п'яти найбільш затребуваних нових платформних можливостей Edge на User Voice (Shadow DOM, Template, Custom Elements, HTML Imports) відносяться до сімейства API, званих веб-компонентами (Web Components). У цій статті ми хочемо розповісти про веб-компонентах і нашому погляді на них, деякої внутрішньої кухні, для тих, хто ще з ними не знайомий, а також поміркувати на тему того, куди все це може еволюціонувати в майбутньому. Це досить-таки довгий розповідь, тому відкиньтеся назад, візьміть кава (або не кофеїновий напій) і починайте читати.

Зміст:
  • Впровадження компонент: стара практика проектування, стала новою для веба
  • Як розбивати на компоненти
  • Це все не в перший раз: попередні підходи до впровадження компонент
  • Сучасні веб-компоненти
  • Веб-компоненти: наступне покоління

Читати далі →

Catberry.js: Flux і веб-компоненти

image
Про що мова?
Цим постом я планую почати цілий цикл статей про изоморфном фреймворку Catberry.js. У цих статтях я, як автор, докладно розповім про внутрішній устрій фреймворку, які у нього є унікальні можливості, опишу деякі рецепти та кращі практики по розробці проектів на ньому.

Ви могли бачити оглядову статті Catberry.js, написану ще в листопаді 2014. З тих пір багато чого змінилося: фреймворк ступив на дві мажорних версії, знайшов нові підходи і архітектуру, засновану на Flux і веб-компонентах.

Про Flux є непоганий переклад статті на хабре. А про веб-компоненти думаю варто згадати, що їх не так давно стали активно просувати хлопці з Google і створили реалізацію під ім'ям Polymer. У Catberry є своя реалізація цих двох підходів зі своїми особливостями, про яких хочеться розповісти в цьому пості.

Якщо вам цікаво дізнатися подробиці реалізації фреймворка з таким ось дивним ім'ям і логотипом, прошу під кат.
Читати далі →

Aurelia - новий сучасний JS-фреймворк

Сьогодні Rob Eisenberg представив свій JavaScript-фреймворк.

Кілька місяців тому він покинув команду AngularJS, щоб повернутися до свого власного проекту, з яким можна почати працювати прямо зараз.

Читати далі →

Polymer: транскрипт відео з Google I\O

Polymer — це спеціальна бібліотека для створення і використання веб-компонентів, а веб-компонент можна визначити, як виділений і незалежних HTML код, який включає шаблони, стилі і супутню js-логіку. До речі, нещодавно на Хабре була цікава стаття Веб-компоненти в реалізації Polymer від Google про те, що ж таке Polymer і чим він може бути корисний.
image
Насправді, завдання Polymer не тільки спростити створення сайтів, Polymer повинен допомогти створювати веб-додатки, здатні без додаткового втручання функціонувати на різних пристроях: від десктопів і мобільних платформ до телевізорів. Polymer можна назвати втіленням Material Design'а для вебу.

І спеціально для тих, хто цікавиться майбутнім веб і взагалі додатків (так-так, ці світи дуже тісно пов'язані! І, якщо вдуматися, то Polymer пов'язує їх ще більше) ми підготували професійний транскрипт відео доповідей з Google I\O:

Читати далі →