• Bootstrap-Vue - В чём фишка данного симбиоза?

    copist
    @copist
    Empower people to give
    Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

    Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

    Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

    Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

    Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

    И вот получается Bootstrap-Vue

    На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

    Добавляем тот факт, что в Vue можно не импортировать компоненты, которые не нужны (например, я не работаю с дропдаунами и модальным окнами) и код становится меньше, грузится быстрее, работает быстрее.

    Так же будет Не лишним оценить технологию: плюсы, минусы, стоит ли вообще с этим работать ...

    Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся
    Ответ написан
    4 комментария
  • Как подключить к node js ssl от cloudflare?

    @nastyskafomka Автор вопроса
    Проблема решена.

    Как всегда виновата невнимательность, и желание "все и сразу".

    Для того, чтобы подключить к node сертификат от Cloudflare нужно выполнить следующие действия:

    1) Сгенерировать TLS сертификат от Cloudflare. Для этого переходим в панель управления доменом, далее Crypto и там находим пункт Origin Certificates
    5cae399254f58892146189.png
    2) Создать TLS сертификат, выбрав следующие параметры:
    5cae3a04086c4580548489.png
    (Срок можно выбрать другой)
    3) Теперь на сервере создать папку где будут лежать наши сертификаты и создать в ней файлы:
    your-domain.ltd.pem и your-domain.ltd.key
    Где your-domain.ltd - ваш домен.
    4) В your-domain.ltd.pem вставить первый ключ
    Пример первого ключа
    5cae3ac918b0d339617028.png

    5) В your-domain.ltd.key вставить второй ключ
    Пример второго ключа
    5cae3b0c2d009139184631.png

    6) Далее на сервере подключить их:
    var app = require('express')();
    
    var options = {
        key: fs.readFileSync('ssl/your-domain.ltd.key'), // PRIVATE KEY
        cert: fs.readFileSync('ssl/your-domain.ltd.pem') // CERTIFICATE
    };
    
    var http = require('https').createServer(options,app);


    Далее, нужно чтобы сервер работал на SSL порте, который использует Cloudflare (ссылка)

    spoiler

    Может это не обязательно, но мы сделали именно так
    5cae3c320abd0767586155.png
    spoiler

    На http не обращайте внимания, просто так получилось.


    Вот и все, теперь можно запустить node.js сервер и перейти по адресу your-domain.ltd:port
    spoiler
    По идее...

    И мы успешно попадем на сервер.

    Надеюсь это кому-нибудь поможет.
    Ответ написан
    2 комментария