Frontend, serverless,
fullstack, no-backend,
vuejs, reactjs, Graphql, noSQL.

Technology, beards, future.

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (12)

Лучшие ответы пользователя

Все ответы (9)
  • Как правильно организовать структуру SPA + Backend?

    @wearemieta
    BEWARE HIPSTERS
    Но бесит, что там нет единого собранного файла bundle.js

    В шаблоне webpack-simple все скрипты собираются как раз в один файл build.js. Обратите внимание, он подключается в сгенерированный index.html. vuejs-templates/webpack-simple.

    Этот файл недоступен в файловой системе при запуске dev сервера, потому что в режиме разработки он находится исключительно в памяти.

    так он еще создает кучи других непонятных файлов и при режиме разработки запускает ненужный 'hot-load'.


    Давайте разберемся, для чего нужен сервер в режиме разработки для Vue. При написания SPA приложения вы используете кучу библиотек, файлов в разных форматах и возможно еще обращаетесь к стороннему API(например twitter). Плюсом, вам хотелось бы использовать транспайлер, чтобы в js можно было красиво писать стрелочные функции и использовать другие вкусняшки ES2015. А еще это здорово было бы склеивать файлы одного формата в один большой для разных оптимизаций. Плюс, после того как вы измените что-то в одном файле, не пришлось бы тыкать каждый раз на перезагрузку страницы. Примерно эти вещи делает за вас dev сервер с webpack в режиме разработки.

    — с помощью webpack вы можете собирать ваши файлы каким угодно образом и складывать их в любое удобное место в фс.
    — вы можете их склеивать, минифицировать и использовать транспайлеры, препроцессоры, постпроцессоры и прочее.
    — вы можете обращаться к стороннему API с локалхоста.
    — если вам не нужен hot-load — отключите его в конфиге.

    Оставить в покое django под портом :8000, а VueJS под :8080. И в nginx как-то слушать их обоих, раздельно, таким образом четко разделить фронт от бэка. Не будет ли проблем?


    Проблем с проксированием nginx'ом? Не очень понятно что вы имеете в виду.

    Если вам нужен кастомный шаблон vue-cli то вы можете легко его разработать один раз и в дальнейшем использовать: Vue-cli custom templates

    Как правильно организовать структуру SPA + Backend

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

    Дело в том, что возникновение таких вещей типа SPA напрямую связано с разными парадигмами разработки. Django как фреймворк позволяет вам писать монолитные приложения. Вы пишете одно большое приложение где храните бизнес-логику, фронтенд, функции-хелперы вроде уменьшения размера загруженных картинок, etc. Деплоите монолитное приложение на одном сервере, возможно на отдельный сервер выносите базу данных.

    Эта парадигма оправдана в определенных случаях, как и другие парадигмы.

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

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

    Ваше приложение схематически выглядит так:

    Клиент: хочу авторизоваться => Сервер приложения: отправлю бизнес-логике => Бизнес-логика: спросим базу (данные для авторизации) => База данных: можно => Клиент: я авторизован

    Используя другой подходе вы можете вынести ваш модуль авторизации пользователей в микросервис на отдельном сервере, уменьшив таким образом запросы к основной базе.

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

    Теперь ваше приложение выглядит так:

    Клиент: хочу авторизоваться => Фронтенд-микросервис: отправляю микросервису авторизации => Микросервис авторизации: можно => Фронтенд-микросервис: я авторизован, хочу данные => Сервер приложения: отправлю бизнес-логике => Бизнес-логика: спросим базу (данные отображения авторизованному клиенту) => База данных: данные => Клиент: я получил данные

    Давайте теперь представим, что вам нужно быстро, а лучше сегодня набросать MVP для демонстрации инвестору или для проверки вашей концепции.

    Авторизация? — микросервис — auth0.com
    SQL База данных? — микросервис — Google CLOUD SQL
    Уменьшаем размер картинок? — микросервис — AWS Lambda

    Что получается в сухом остатке? Вам требуется лишь написать SPA из которого вы будете обращаться к вашим микросервисам. То есть, вы получаете приложение, которое можно хостить как статический сайт, переложив на микросервисы большинство задач, которые вам требуются в вашем приложении.

    Конечно, это решает определенные проблемы, но и создает новые, поэтому, повторюсь, все зависит от ваших задач.

    Давайте посмотрим на ваш пример с Django. Если я все правильно понимаю, то вы хотите использовать все плюсы Django, типа ORM, API доступа к БД, etc, заменив лишь систему шаблонов на Vue?

    В таком случае, на мой взгляд, вам нужно реализовать на Django классический REST API и из SPA на Vue обращаться к endpoint'ам вашего API.

    Ссылки по теме:
    Архитектура микросервисов
    SPA-архитектура для CRM-систем: часть 1
    SPA-архитектура для CRM-систем: часть 2
    AWS Lambda и никаких серверов
    Ответ написан
    Комментировать
  • Пишут ли проекты на чистом JS?

    @wearemieta
    BEWARE HIPSTERS
    Есть ли какие-нибудь проекты.сайты или приложения которые написанны на ванильном JS'e.

    Не поверите, но все сайты, которые используют js написаны именно на ванильном js. Вы поймете это, когда прочитаете мой ответ до конца.

    Почему для Javascript'a используется обильное кол-во библиотек/фреймворков и расширений вроде TypeScript


    Давайте поймем что такое фреймворк, библиотека, расширение. Вы пишете код. Скорее всего, в разных частях и файлах вашей программы вы часто выполняете одно и тоже действие, например, делаете все буквы в слове ПРОПИСНЫМИ. Вот так на 'ванильном JS' может выглядеть ваша функция:

    function wordToUppercase(word) {
      return word.toUppercase()
    }


    Чище некуда, так ведь? Теперь можно копировать этот кусочек в любую часть кода где он нужен. Но что если нам нужно слегка поменять эту функцию, например, так:

    function wordToUppercase(word) {
      if (word.length > 3) {
        return word.toUppercase()
      }
    }


    И снова чистый js. Теперь снова можно копировать! Но если мы хотим в одном случае считать длину слова, а в другом нет? Скопируем два раза и изменим в одном месте? А если мест много?

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

    Что же произошло? Мы нашли подходящее решение для нашей проблемы и вынесли его в отдельный кусочек кода. Так что же все-таки фреймворк, библиотека, расширение?

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

    Библиоте́ка (от англ. library) в программировании — сборник подпрограмм или объектов, используемых для разработки программного обеспечения (ПО).


    Теперь мы можем легко реиспользовать наши наработки в других похожих программах.
    Говоря абстрактным языком, библиотека — набор решений для часто встречающихся проблем.

    Опять же, абстрактно, фреймворк — набор решений для часто встречающихся проблем. Только он решает другие проблемы, нежели библиотека. Проблемы структурирования.

    Структу́ра (от лат. structūra «строение», «устройство», «связь или расположение составных частей»):


    Почему для Javascript'a используется обильное кол-во библиотек/фреймворков и расширений вроде TypeScript


    Люди обильно писали код на js. Сталкиваясь с определенными проблемами они находили решения. Эти решения они стали выделять в библиотеки, фреймворки и расширения, которые являются ничем иным как определенными способами решения определенных проблем/задач.

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

    может ли уменьшится в них надобность с выходом Es-6/7 и дальнейших спецификаций?


    Спецификации точно таким же образом используются для решения определенных задач. Если задачи вашего приложения можно решить с помощью спецификаций, то надобность вашему приложению
    в других инструментах решения уменьшится.

    Сможете теперь ответить, почему все сайты, которые используют js написаны именно на ванильном js?
    Ответ написан
    Комментировать
  • На чем организовать веб(онлайн) видео-конференции?

    @wearemieta
    BEWARE HIPSTERS
    Поднимите себе Jitsi Meet на 5-ти долларовом инстансе DigitalOcean и ваша видеоконференция сможет вмещать тысячи участников.

    Ссылки по теме:
    Протестировать
    Jitsi Meet Github
    Ответ написан
    Комментировать
  • Как добавить доверенный центр сертификации в Linux, чтобы curl не ругался?

    @wearemieta
    BEWARE HIPSTERS
    В ymca.p7b лежит цепочка сертификации. Это значит, что сертификатов там несколько и нужно их склеить:

    openssl pkcs7 -inform DER -outform PEM -in ymca.p7b -print_certs > ymca.crt

    www.openssl.org/docs/apps/pkcs7.html

    Ну а теперь, надо их установить в систему:

    sudo mkdir /usr/share/ca-certificates/extra
    sudo cp ymca.crt /usr/share/ca-certificates/extra/ymca.crt
    sudo dpkg-reconfigure ca-certificates

    askubuntu.com/questions/73287/how-do-i-install-a-r...

    Собственно, после этого в /etc/ssl/certs/ должен появиться ymca.pem и одно из API Яндекса должно заработать.
    Ответ написан
    Комментировать
  • Как правильно хранить состояние пользователя (залогинен или нет)?

    @wearemieta
    BEWARE HIPSTERS
    Local Storage замечательно поддерживается браузерами: Can I Use Web Storage
    Если хотите, можете использовать его. Но, не забывайте про XSS. Cookies vs HTML5 Web Storage

    Ну и да, вы забыли про cookies.
    Ответ написан
    Комментировать