Frontend разработки порталов на СПО: делимся опытом

В первой части статьи о том, как мы создаем портальные решения для крупнейших работодателей России, была описана архитектура со стороны backend-а. В данной статье мы перейдём к frontend-у.

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

Переиспользуемость

Фронт написан в большей части на Vue.js, и так как весь портал разбит на портлеты, каждый из них – это отдельный инстанс Vue со своим стором (Vuex), роутом (Vue Router) и компонентами. Каждый такой инстанс вынесен в свой репозиторий.

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

Один хранит общий функционал: это общие компоненты, сервисы, константы и т.д. У нас этот модуль называется Vue-common.

Во второй субмодуль вынесены настройки для сборки, он хранит конфиги для webpack-а, а также лоадеры и хелперы, необходимые при сборке. Этот модуль называется Vue-bundler.

Для удобства работы с API методы REST-а также были разделены на общие и локальные. Во Vue-common были вынесены методы для получения списка юзеров портала, методы администрирования, доступа к файловой системе портала и прочие. Все API endpoint-ы были вынесены в отдельные сервисы, которые регистрировались в точке входа и подключались к инстансу Vue. Затем они могли использоваться в любой точке приложения.

Каждый отдельный сервис регистрируется внутри плагина. Для подключения плагинов во Vue есть встроенная функция use. Подробнее о плагинах во Vue можно почитать тут.

Сам плагин инициализируется вот так:

class Api {     constructor () {         // Инстанс http клиента, который формирует запросы         this.instance = instance          // Так происходит регистрация общих сервисов        // В каждый сервис прокидывается this, чтобы был доступ к инстансу http клиента         Object.keys(commonServices).forEach(name => commonServices[name](this))                  // Так происходит регистрация локальных сервисов 	requireService.keys().forEach(filename => requireService(filename).default(this))     }      install () { 	Vue.prototype.$api= this     } }  export default new Api() 

Кроме инициализации:

1. Создается инстанс http клиента. В котором задается baseURL нашего backend-а и заголовки

   const instance = axios.create({ 	baseURL: '/example/api', 	responseType: 'json', 	headers: { 		'Content-Type': 'application/json', 		'Cache-Control': 'no-cache', 		'Pragma': 'no-cache', 	} })               Так как backend у нас рестовый, мы используем axios.

2. Создаются сервисы, хранящие сами запросы

   // api - это наш http клиент export default api => { 	api.exampleService= { 		exampleGetRequest(params) { 			return api.instance.request({ 				method: 'get', 				url: `example/get`, 				params 			}) 		}, 		examplePostRequest(data) { 			return api.instance.request({ 				method: 'post', 				url: `example/post`, 				data 			}) 		}, 	} } 

   Во vue-common-е достаточно создать только такой сервис, а регистрируется он уже для каждого портлета в классе Api

3. Регистрируются общие и локальные сервисы

        const requireService = require.context('./service', false, /.service.js$/) 

В компонентах они используются очень просто. Например:

export default { 	methods: { 		someMethod() {     			this.$api.exampleService.exampleGetRequest() } } } 

Если нужно делать запросы за пределами приложения, то можно сделать так:

// Импортировать апи класс (@ - это алиас прописанный в конфиге) import api from ‘@/api’  // И потом просто из него дергать нужный метод api.exampleService.exampleGetRequest() 

Маштабирование

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

Компоненты регистрируются глобально для каждого приложения как локальные, так и общие.

Регистрация компонентов выглядит так:

import _ from “lodash”  const requireComponent = require.context('@/components', true, /^[^_].+\.vue$/i)  requireComponent.keys().forEach(filename => {     const componentConfig = requireComponent(filename)      // Get PascalCase name of component     const componentName = _.upperFirst(         _.camelCase(/\/\w+\.vue/.exec(filename)[0].replace(/^\.\//, '').replace(/\.\w+$/, ''))     )      Vue.component(componentName, componentConfig.default || componentConfig) }) 

Иногда возникает необходимость для разрабатываемого нами портала добавить уникальную функциональность и для этого приходится писать компоненты, свойственные только ему, или просто по-другому реализовать тот или иной компонент. Достаточно создать компонент в отдельной папке, например /components-portal/*название портала*/*.vue, и зарегистрировать его в нужном entry point-е, добавив require.context не для одной папки, а для нескольких.

const contexts = [     require.context('@/components', true, /^[^_].+\.vue$/i),    require.context('@/components-portal/example', true, /^[^_].+\.vue$/i) ]  contexts.forEach(requireComponent => {     requireComponent.keys().forEach(filename => {         const componentConfig = requireComponent(filename)          // Get PascalCase name of component         const componentName = _.upperFirst(             _.camelCase(/\/\w+\.vue/.exec(filename)[0].replace(/^\.\//, '').replace(/\.\w+$/, ''))         )          Vue.component(componentName, componentConfig.default || componentConfig)     }) }) 

Если для компонента под определенный портал задать такое же имя, как из общей библиотеки компонентов, то он просто перепишется как свойство объекта и будет использован как компонент под данный портал.

Также глобально регистрируются ассеты, например svg иконки. Мы используем svg-sprite-loader, чтобы создать спрайт из svg иконок и потом использовать их через <use :xlink:href="#*название иконки*"/>

Регистрируются они так:

const requireAll = (r) => r.keys().forEach(r)  const requireContext = require.context('@/assets/icons/', true, /\.svg$/)  requireAll(requireContext) 

Чтобы масштабировать не только функционал, но и стили компонентов, у нас реализован механизм смены стилей для определенного портала. В однофайловых компонентах указываются стили в теге <style>, и они применяются по умолчанию. Для того чтобы реализовать стили под конкретный портал, необходимо прописать их в ещё одном теге