gearmobile

Возьмем одну ср. статистическую страницу, к примеру простой лендинг, которая состоит из:

Навигация. При скролле или клике на пункт меню происходит прокрутка к соответствующей секции, пункту присваивается класс active
Аккордеон. 
Табы. 
Галлерея. Для просмотра изображений используется fancybox плагин
Слайдер. Тоже плагин
Форма обратной связи. Необходима настройка валидации (validation плагин), отправка формы. Тут есть небольшое решение - https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/#submitting-a-form

gearmobile

Meetup App

Описание

CRUD-приложение для работы с Firebase в качестве базы данных. Создание, чтение, редактирование и удаление записей. Является учебным приложением для целей - как создаются приложения подобноо рода. Для стилизации используется фреймворк Vuetify.js в стиле Material Design. Приложение создано на основе учебного материала с ресурса - https://www.youtube.com/watch?v=FXY1UyQfSFw&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt. Приложение не претендует на оригинальность.

Стек технологий

gearmobile

<template lang="pug">
  .container
    .row
      .col-xs-12
        h1
          | Posts
        h3
          | This file will list all the posts
        div
          router-link( :to="{ name: 'NewPost' }" )

gearmobile

<template lang="pug">
  section.edit
    h1
      | edit post
    form( @submit.prevent="editPost()" )
      div
        input( type="text", name="title", id="title", placeholder="Title", v-model.trim="post.title" )
      div
        input( type="text", name="description", id="description", placeholder="Description", v-model.trim="post.description" )
      div

gearmobile

<template lang="pug">
  .container
    .row
      .col-xs-12
        h1
          | Add New Post
        form
          .form-group
            input.form-control( type="text", name="title", id="title", placeholder="Title", v-model.trim="post.title" )
          .form-group

gearmobile

<template lang="pug">
  .container
    .row
      .col-xs-12
        h1
          | Posts
        h3
          | This file will list all the posts

        section.panel.panel-success( v-if="posts.length" )

gearmobile

Token-Based Authentication(JWT)

Preconditions:

В данной заметке рассматривается работа JWT с симметичным алгоритмом шифрования (HS256/HS384/HS512)

Основы:

Аутентификация(authentication, от греч. αὐθεντικός [authentikos] – реальный, подлинный; от αὐθέντης [authentes] – автор) - это процесс проверки учётных данных пользователя (логин/пароль). Проверка подлинности пользователя путём сравнения введённого им пароля с паролем, сохранённым в базе данных пользователей;

Авторизация(authorization — разрешение, уполномочивание) - это проверка прав пользователя на доступ к определенным ресурсам.

gearmobile

# App Cleaner ( Vue.js + VueRouter + Vuex + Bootstrap )
https://app-cleaner.herokuapp.com/
https://github.com/gearmobile/ready-vuejs/tree/master/app-cleaner

# Credit Calculator ( Vue.js, Vue-Slider, Reflex-Grid )
https://app-credit-calculator.herokuapp.com/
https://github.com/gearmobile/ready-vuejs/tree/master/credit-calculator

# Concrete Calculator ( Vue.js + Vuetify.js )
https://concrete-calculator-app.herokuapp.com/

gearmobile

Electron - для Desktop,
Ionic - для гибридных мобильных
NativeScript - для быстрый нативный мобильных

gearmobile

Q: гайз, а это правда, что использование функционального компонента предпочтительнее перед "обычным" компонентом
( в котором классы )?

A: да, это правда. Ведь он не выполняет каждый раз все события жизненного цикла при генерации.
У него только одно событие - render.

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