Реліз CleverStyle Framework 4

якось не виходило писати більше однієї статті від початку нової гілки (частина 1, частина 2, частина 3), але ось знову є чого цікавого розповісти, адже вийшов перший реліз серії 4.х.

Коротко про все

Перше, що хотілося б сказати — проект був перейменований з CleverStyle CMS в CleverStyle Framework. Нарешті! Більше не буде плутанини між назвою і змістом.

Якщо серія 2.х почалася з істотних змін на стороні сервера, а 3.х з порівнянних змін на клієнті, 4.х приносить поліпшення скрізь.

На сервері істотно збільшена швидкість роботи, при тому що це full-stack фреймворк, використовуючи HTTP сервер заснований на ReactPHP можна отримати швидкість генерації сторінки НИЖЧЕ 1мс, швидше стала генерація HTML в типових сценаріях.
Так само додалася зручна підтримка вкладених структур у файлах перекладів, додалася підтримка SQLite, PostgreSQL, підтримка роботи в якості PSR7 Middleware (ініціалізація з PSR7-сумісного request об'єкта і видача результату в PSR7-сумісний response об'єкт) і пов'язані з цим зручні абстракції в самому ядрі.

На фронтенде повсюдно використовується RequireJS, ряд бібліотек, безумовно що завантажуються на фронтенде, тепер завантажуються тільки коли безпосередньо потрібно, додані оптимізації для швидкого відтворення першого кадру (first paint).

На стику backend та frontend оптимізації побудови кешу статики (CSS/JS/HTML), HTTP/2 Server push,
Link: <preload>
та багато іншого.

В цілому система виглядає як хороший гібридний (не чисто микроядерный, але і не жирний такий) full-stack php фреймворк.

Як завжди, не обійшлося без поліпшення метрик коду, наприклад, оцінки Scrutinizer:)

Polymer і веб-компоненти

Почати можна з того ж, з чого минула стаття — з веб-компонентів.

Сам Polymer все ще поставляється патчений, але вже з іншою метою. Всі важливі PR були прийняті, 2 не прийнятих поставляються як runtime патчів і на сам білд не впливають. Зате тепер збірок Polymer використовуються в системі вирізана підтримка Shady DOM, оскільки система використовує повну версію Shadow DOM (і повний полифилл там де підтримки немає). Як результат білд істотно менше оригінального.

Полифилл WebComponents.js так само оптимізовано. По-перше з нього вирізані всі полифилы для IE/Edge (які підключаються тільки для цих браузерів), так само WebComponents.js не підключається Chromium/Chrome, тому що просто там не потрібен.

Самі веб-компоненти використовуються все більше, приміром, зараз з їх використанням отрефакторены модулі: Blogs, Comments, Disqus, ну і система давно вже їх використовують для всього.

Так само система навчилася краще минифицировать HTML файли, тепер все JS комбінуються і деякі помилки ранньої реалізації були виправлені.

RequireJS (Alameda)

Це насправді дуже важлива фіча. В останній версії замість RequireJS використовується більш сучасний та компактний (але назад сумісний) аналог від того ж розробника Alameda.

RequireJS інтегрований на всіх рівнях:
  • сторонні бібліотеки, такі як autosize, html5sortable і jssha, що поставляються разом з ядром, насправді використовуються виключно як AMD модулі і ніяк інакше (jQuery очікується бути винесеною аналогічно в 5.x)
  • всі компоненти можуть використовувати AMD модулі для власних потреб дуже просто, наприклад,
    components/modules/Blogs/includes/js/xyz.js
    можна прозоро завантажити модуль
    Blogs/xyz
    (підпапки також підтримуються)
  • коли в корені сайту виявлені
    bower_components
    та/або
    node_modules
    від Bower/NPM, буде здійснено автоматичний пошук AMD модулів, так що ви зможете відразу викликати
    require(['lodash']).then(function (_) {})
    без попередньої конфігурації
  • аналогічно кореневим Bower/NPM папок, залежності, встановлені через Composer assets плагін будуть оброблені аналогічно, стаючи доступними з назви без яких/або шляхів
  • більш того, якщо ви звернетеся до встановлених через Composer assets модулів за абсолютним шляху як буд-то вони встановлені у корінь, наприклад,
    /node_modules/d3/d3
    то все буде працювати як ніби залежність і правда встановлена саме там!


Таким чином кількість обов'язково завантаження коду істотно скоротилася, скоротиться далі в серії 5.х, і ще більше потенціалу дає розробнику.

IE 10

Час йде, в ядрі лише __proto__ не використовується для сумісності з IE 10, все інше тягар сумісності винесено новий плагін Old IE, куди в серії 5.х перекочує і підтримка IE 11.

Request/Response, PSR7

Тепер трохи про серверної частини. Додалися системні об'єкти
cs\Request
та
cs\Response
, обидва вміють працювати з PSR7, і обидва забезпечують ре-ініціалізацію по необхідності.
Все це разом максимально спростив використання фреймворку як Middleware, що можна побачити на прикладі того, як зараз відбувається інтеграція з ReactPHP.

Оскільки ре-ініціалізація забезпечується автоматично, на рівні ядра, стало можливим взагалі ніколи не перестворювати системні об'єкти, а замість цього тільки переинициализановать потрібні частини. Це дозволяє досягти генерації сторінки швидше ніж за 1мс.

Так само разом з підтримкою абстракцій був написаний повністю автономний потоковий парсер multipart запитів, так що вивантаження файлів буде працювати з будь-яким методом, а не тільки POST, так само сайт не зламається при
enable_post_data_reading = Off
в php.ini (під ReactPHP поки все ще немає підтримки вивантаження файлів, дуже сподіваюся що найближчим часом вийде новий реліз з https://github.com/reactphp/http/pull/41 в його складі).

SQLite/PostgreSQL

Ці два драйвера БД були повноцінно додані ядро, але не підтримуються поки ні одним з модулів (це тимчасово). SQLite можна використовувати для простих сайтів, де БД як така взагалі не потрібна, але система вимагає її для зберігання конфігурації і налаштувань єдиного адміністратора. У цьому сценарії SQLite не буде гальмувати, оскільки кешування скоротить її використання до нуля в абсолютній більшості випадків.

Сесії

З сесіями вийшла цікава історія з гарним кінцем. Історично в системі використовується кастомний система сесій, яка більш гнучка, ніж вбудована, добре масштабується і працює дуже швидко.

Швидко, але не на стільки, на скільки може бути взагалі без сесій. У результаті, останні версії системи не заводять сесію на користувача поки він не використовує, для чого насправді потрібні сесії. Це дозволяє уникнути запитів до БД на типових сторінках для користувачів, які вперше потрапили на сайт.

Простору імен файлів перекладів

Фіча давно напрошувалася. Спочатку з'явилася підтримка префіксів в об'єктах з перекладами, потім префікси почали набридати в самих перекладах, так що тепер можна робити простіше:



HTTP/2 Server push, preload

Останні версії Chromium/Chrome підтримують заголовок/мета-тег preload, що говорить браузеру що цей ресурс ось 100% потрібен сторінці, втомлюй його навіть якщо поки не зрозумів для чого, я точно знаю що він буде потрібен.
Цей же атрибут використовують nghttp2 і CloudFlare HTTP/2 Server push.

Оскільки фреймворк спочатку має інформацію про те, які є статичні ресурси і залежності між ними, а під час минификации і компресії він знає ще і які картинки, шрифти та інші речі використовуються всередині ресурсів, він використовує цю інформацію для генерації відповідних заголовків, що самим позитивним чином позначається на час завантаження сторінки.

CLI інтерфейс

Останній реліз також приніс корисну фічу CLI інтерфейсу на рівні ядра. Поки мало що доступно через нього, але вже зовсім скоро буде більше. Плани на нього великі як в ядрі, так і компонентах, хоча вже зараз можна зробити дечого корисного, ну або використовувати у своїх компонентах:)

Оновлення

Компоненти Blogs, Comments, Composer, Disqus, Uploader, Composer assets і TinyMCE використовують найостанніші зручні фічі ядра, і є прикладами того, як варто робити компоненти в сучасній версії фреймворка. Інші компоненти здебільшого просто портировались для сумісності з новими версіями і не використовують потенціал системи на 100%, але в наступних оновленнях.

Сторонні залежності були оновлені до актуальних версій на час релізу.

Документація

Документація після деяких роздумів була перенесена в той же репозиторій що і вихідний код. По-перше так простіше синхронізувати зміни, а по-друге тепер можна буде подивитися документацію, якою вона була в більш старих версіях системи якщо потрібно (або порівняти зміни до документації від версії до версії), чого не можна було зробити простим чином з wiki.

Scrutinizer

Не знаю, багато це чи мало, але з 7.74 до 8.15 оцінка піднялася, так і розподіл істотно змінилося:



Відео уроки для розробників

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

Бажаючі поспілкуватися чатике можуть зробити це в Gitter.
Код на GitHub документація в папці docs.
Запустити помацати можна одним рядком за допомогою Docker (краще використовувати Firefox, google chrome не бажає виставляти cookie на localhost):

docker run --rm -p 8888:8888 nazarpc/cleverstyle-framework

Також нова версія використовується на cleverstyle.org (HTTP/2 і іншими радощами).
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.