Nareszcie nadszedł ten moment w którym back-end zwrócił pierwsze dane z bazy i chcąc żyć według Agile'a trzeba by pokazać pierwsze fragmenty na frontcie.

A Front to... biała strona!

Jak developer nie jestem w stanie sama napisać wszystkich komponentów jednocześnie zakładając wypuszczenie aplikacji w ciągu najbliższych miesięcy. Więc zostało mi użycie jakiegoś frameworka...

Mam spore wymagania: napisany w VueJS, ze wsparciem dla TypeScripta, ładny design. Jako że należę do frontowych konserw fajnie by było aby ktoś wcześniej sprawdził server-sider rendering oraz nuxta, ale nie będę się upierać przy tym.

V-Semantic

https://www.npmjs.com/package/v-semantic

Już na samym początku natrafiłam na bardzo ciekawy, lekki projekt napisany w TypeScriptcie. Dostępne komponenty wydają się bardzo na czasie i już miałam porzucić resztę poszukiwań zanim zobaczyłam zależność od jQuery... Thank you, next!

Bootstrap + Vue

To jest ten typ framewoka, którego się boję i jednocześnie wiem, że można na niego liczyć. Pisząc MVP aplikacji nie wiesz co dokładnie będzie ci potrzebne w przyszłości, ale ponad siedemdziesiąt komponentów przeraża. Niemniej jednak jest to popularne rozwiązanie z którego wiele osób koezysta i ma bardzo dobrą opinię.

https://bootstrap-vue.js.org/

Vuetify

Mój plan awaryjny, bowiem z Vuetify korzystałam i trzeba przyznać, że jest to świetny, pewny framework. Serdecznie polecam :)

https://vuetifyjs.com/

Vuesux

Przyznam, że od początku odstraszył mnie design, brak wsparcia dla TypeScripta oraz wdrożenie. Zapala mi się czerwona lampka w głowie, gdy ikony trzeba zainstalować samemu, choć są integralną częścią frameworka. Niemniej jednak projekt jest całościowy (komponenty, szablon, ustawianie indywidualnych styli), ma duży potencjał oraz możliwości.

https://lusaxweb.github.io/vuesax/components/alert.html#default

Fundamental Vue

Starannie przejrzałam dokumentację i przyznam, że bardzo zaniepokoiły mnie informacje o błędach w komponentach opisane w dokumentacji. Niepoprawionych do dzisiaj! Mnie się nawet nie podoba wizualnie, ale jeśli ktoś chce zobaczyć, śmiało :)

https://sap.github.io/fundamental-vue/#/example/calendar

Quasar

Bardzo ciekawy framework ze względu na obszerną dokumentację, świetny guide, wsparcie dla najnowszych standardów oraz wielu platform. Z początkowych opisów (a także 3 sposobów instalacji w których każdy mocno determinuje feature'y) wydawał się bardzo ingerować w strukturę aplikacji.

https://quasar-framework.org/components/color-picker.html

Muse UI

Przyznam, że bardzo podoba mi się wizualnie. Dobra dokumentacja, dużo komponentów, możliwość prostego zmieniania kolorów globalnie oraz prosta implementacja to duże zalety. Oglądając MuseUI zaczęłam ostro zastanawiać się jakie komponenty będą mi potrzebne i czy ten framework wystarczy.

https://muse-ui.org/#/en-US/

Element

Kolejny popularny i dobrze udokumentowany framework. Podczas gdy większość frameworków w sieci i na tej liście trzyma się Materialize, Element wyróżnia się FlatUI, który bardzo mi się podoba ze względu na prostotę. Jest wsparcie dla TypeScripta, dosyć dużo komponentów, możliwość importu tylko tych najpotrzebniejszych. Chyba mamy zwycięzcę!

https://element.eleme.io/#/en-US/

Implementacja ElementUI

Implementacja jest w miarę prosta chociaż miałam kilka przygód po drodze.

Po pierwsze instalujemy paczkę (na razie całą, nie wiem jeszcze jakich komponentów użyję):

npm i --save element-ui

Potem dołączymy paczkę styli do naszych:

// main.scss
@import './variables.scss';
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index.scss";

Pierwszy import jest bardzo ważny, ponieważ pozwala nadpisać domyślne zmienne. Musimy nadpisać ścieżkę do pliku fontów ($--font-path), ponieważ domyślna jest zła:

// variables.scss
// Element UI
$--font-path: '../../../node_modules/element-ui/lib/theme-chalk/fonts';
$--color-primary: $cl-primary;

Zanim skopiujesz pamiętaj: twoja ścieżka będzie inna.

Kolejnym krokiem będzie dodanie do webpacka parsowania ścieżek, co pozwoli nam znajdować czcionki ładowane w stylach. Tak, dodawanie loaderów nigdy się nie kończy :)

// webpack.config.js -> dodatkowy obiekt w tablicy config.module.rules
{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'url-loader'
},

Pięknie, już wszystko powinno działać. Teraz zaimportujmy jakiś prosty element i spróbujmy użyć frameworka!

Przed nami przykładowy komponent Vue:

// component.vue
<template>
    <Menu :default-active="activeIndex" class="solutionchaser" mode="horizontal">
      <Submenu index="2-4">
        <template slot="title">Position Default</template>
        <MenuItem index="2-4-1">Position 1</MenuItem>
      </Submenu>
      <MenuItem index="1">Position</MenuItem>
      <Submenu index="2">
        <template slot="title">Position</template>
        <MenuItem index="2-1">Position 1</MenuItem>
        <MenuItem index="2-2">Position 2</MenuItem>
      </Submenu>
    </Menu>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';
    import { Menu, MenuItem, MenuItemGroup, Submenu } from 'element-ui';

    @Component({
        components: {
            Menu,
            MenuItem,
            Submenu,
        },
    })
    export default class HeaderNavigation extends Vue {
        constructor() {
            super();
        }
    }
</script>

<style lang="scss">
    @import 'src/app/styles/main.scss';
</style>

Zacznijmy analizę od skryptów.

Na początku mamy parę importów z czego nowością jest jedynie import poszczególnych componentów z Element UI. W przeciwieństwie do komponentów w Javascript, te w TypeScript są nazwane CamelCasem. Poza tym można kopiować z dokumentacji.

W szablonie możemy je wykorzystać jak normalne komponenty :)

Podsumowanie

Szukające perfekcyjnego frameworka tonęłam w morzu opcji. Przejrzałam jeszcze więcej frameworków, ale nie chciałam was zanudzić wieloma opcjami czy długimi opisami. Od dawna nie siedziałam tak głęboko na frontcie i do teraz nie wiem czy dobrze wybrałam. Jeśli ostro przejadę się na ElementUI to na pewno Wam wspomnę, być może powinnam się trzymać bardziej sprawdzonych wersji.

Przynajmniej mi się podoba :)

A jakie Wy macie doświadczenia z frameworkami UI? Jeśli chcecie się podzielić dobrymi radami, serdecznie zapraszam!

UPDATE: Negatywne wnioski po release'ie

Jest koniec czerwca i mam dla was update, ponieważ wypuściłam na produkcję małą apkę z użyciem tego frameworka. Podczas developmentu zachwycałam się prostotą użycia i wyglądem kontrolek, jednak w czasie testów wyszedł brak obsługi m.in. retiny oraz gigantyczna paczka.

Z paczką połowicznie dałam radę ładując tylko te komponenty, które mi się przydały. Bardzo pomocna była instrukcja na stronie ElementUI (link). Analiza webpacka wskazała na spadek kilobajtów, jednak wciąż nie do poziomu, który by mnie zadowolił.

Widoczność na urządzeniach z mocno zagęszczonych pixelami poprawiłam prawie w ostatniej chwili w stylach, jednak wymagało to sporo niepotrzebnej pracy i wiele pozostało do zrobienia. Wciąż szukam rozwiązania w frameworku, gdyby ktoś wiedział jak globalnie rozwiązać problem to chętnie posłucham. Na razie wszystko jest w pixelach...

Także na razie ElementUI idzie w odstawkę, a szkoda, bo jest ładny i wygodny. Mam nadzieje, że rozwiążę ten problem, bo bardzo lubi się z TypeScriptem i nie zauważyłam w nim większych błędów.