Како да започнете со Mithril

(Ова е гостински пост на Моника Јандревска. Постот е првично објавен на Medium, и e реобјавен со нејзина дозвола.)


Денес се достапни повеќе JavaScript рамки (framerwork) кои треба да им го олеснат животот на девелоперите. Но, изборот на рамка за следниот проект може да биде навистина проблематичен. Angular и React се водечки рамки, а Vue.js постојано ја зголемува својата популарност. Но, тука е и Mithril.

Mithril е компактна и брза рамка за креирање на „сингл пејџ“ апликации со поддршка за сите модерни прелистувачи. Од картата за споредби за Mithril  може да го дознаеме следново:

Framework Големина Update „перформанси“ Документација
Mithril v 2.0.0 8 kb 6,4 ms Добро напишана, едноставно се разбира
Angular v 2.0 135 kb 11,5 ms покомплексна
React 64 kb 12,1 ms едноставна
Vue v 2.0 40 kb 9,8 ms едноставна

Табела 1:Перформансите за базираат на бенчмарк тестови

Од резултатите од табелата може да забележиме дека Mithril покажа подобри перформанси во споредба со останатите технологии.

Инсталација

Има неколку начини да го додадете/вклучите Mithril.js во вашиот проект. Следните се најбрз и наједноставен начин да го додадете Mithril:

  • Директно во JS фајлот со CDN:
    <script src=”https://unpkg.com/mithril/mithril.js”></script>
    во index.js фајлот.
  • Со инсталирање на пакетот преку команден интерфејс (CLI):
    NPM — Со командата:

    $ npm install mithril --save

    И потоа се додава со „require(‘mithril’);“ или „import m from ‘mithril’“.

DOM елементи

DOM (Document Object Model) е начинот на кој Javascript ги „гледа“ податоците на страните. Тоа е објект кој вклучува како HTML/XHTML/XML се форматирани. Пример за DOM елементи се html, body, div, и слично. Може да се користи и CSS  да се додадат класи и id на DOM елементите со цел да се додаде стил или да се овозможи на JavaScript да има интеракција со нив.

Функцијата m() е една од најважните во Mithril.js. Се користи за рендер на било која HTML компонента преку нејзино повикување.

Функцијата m() ги содржи следните параметри:

  • selector – (задолжителен) Аргументот е од тип „String“ или „Object“. Мора да биде дефиниран, а може да биде CSS селектор или компонента.
  • attributes – (незадолжителен) Овој атрибут е „Object“. Не е задолжителен и се однесува на HTML атрибут или својство (property) на елементот.
  • children – (незадолжителен) Овој аргумент е незадолжителeн и може да биде објект кој може да се рендерира (m call или string) или array од повици и стрингови.

M()-фунцијата враќа „vnode“.

Пример 1

M.render() функцијата генерира виртуелно DOM дрво и го прикачува на document.body. Document.body  претставува <body> или <frameset> node за сегашниот документ. „Hello World“ стрингот е пример за текст што треба да се рендерира.

Пример 2

See the Pen
Mithril – Example 2
by Monika Jandrevska (@monika-jandrevska)
on CodePen.

Овој пример го покажува изразот за параграф со класа paragraph1 и текст „My first paragraph in Mithril“.

HTML приказот на изразот е

<p class=”paragraph1”>My first paragraph in Mithril</p>

Пример 3

See the Pen
Mithril – Example 3
by Monika Jandrevska (@monika-jandrevska)
on CodePen.

Ова е пример за тоа како да работите со повеќе DOM елементи. Елементот „div“ кој е контејнер со класа „wrapper“ има два „child“ node – едниот хединг со класа „title“ и текст „My first app in Mithril“, и вториот копче со текст „Click here“.

Компоненти

Компонентите на Mithrl во основа се објекти со view() функција. Користењето на компоненти во Mithril има повеќе предности.

  • Одржување – промените се прават во еден фајл наместо на повеќе места
  • Повторно користење – Развијте компонента и користете ја кога ќе ви притреба. Пример е header во SPA.
  • Добра структура на код – Користењето на компоненти ја намалува комплексноста на кодот. Кодот може едноставно да се структурира ако има неколку компоненти наместо еден гломазен фајл.
  • State data – Податоците може да се праќаат како аргумент преку this.vnode.data.
  • Lifecycle callbacks – Ова е функција која се повикува во различни точки на „животот“ на една компонента. (Повеќе за ова во следниот блог)

See the Pen
Mithril – Components
by Monika Jandrevska (@monika-jandrevska)
on CodePen.

Во овој пример Screen1 компонентата е креирана со користење на view-функцијата. „Return“ содржи „div“ контејнер со уште еден „div“ елемент внатре и копче, кога ќе се притисне се повикува „alert“ функцијата. Оваа функција едноставно печати текст во конзола. M.mount() функцијата ја качува компонентата во виртуелниот DOM. Оваа компонента може да се активира со оваа линија код.

m.mount(document.body, Screen1);

Разликата помеѓу m.mount() и m.render() е што m.mount() го повикува автоматското прецртување на Mithril. Според кодот погоре се генерира следната HTML структура.

<div>

     <div class=”title”>Title</div>

     <button>Click me!</button>

</div>

Routing

Бидејќи сингл пејџ апликациите се реткост, треба да најдеме некакво решение за навигација низ различни страници од апликацијата. Тука до израз доаѓа рутирањето, буквално значи скокање од еден прозорец во друг. Се користи за префрлање на корисниците помеѓу различни презентации во апликацијата.

Следниот пример го префрла корисникот од Screen 1 на Screen 2:

See the Pen
Mithril – Routing
by Monika Jandrevska (@monika-jandrevska)
on CodePen.

Делот „#!“ е наречен „hashbang“ и се користи како индикатор дека делот по „/“ означува routh патека.

Патеката по root компонентата е основна (default) и ако нешто не е во ред со специфичната патека или компонента, Mithril ја рендерира оваа патека.

If the application has several views, then m.route() is used:

m.route(root, "/screen1", {//default route
        "/screen2": Screen2, //route for view called Screen2
        "/screen2Details/:id": Screen3, //route for view called Screen2Details with id as parameter
        "/screen4": Screen4, //route for view called Screen4
});

XHR

XHR (XMLHttpRequest) е метод за комуникација со серверот. Mithril овозможува сопствена имплементација (m.request) и ги олеснува XHR повиците и се обидува да „прецрта“ (redraw) по секој XHR.

За тестирање повици ќе користам REM, има активиран CORS и може да се пристапи од секаде. Овој сервер се користи и во официјалната документација.

Еве пример за барања за листа на корисници:

var users = []; // initializing an empty array called users
var listUsers = function(){
       m.request({ 
            method: “GET”,
            url: “http://rem-rest-api.herokuapp.com/api/users”,
            withCredentials: true,
        })
      .then(function(res){
           console.log(res);
      })
};

М.request() функцијата ги содржи следните параметри:

  • Method – кој тип на акција треба да се користи… пример за други повици PUT, DELETE, POST
  • Url – url до крајната точка (endpont)
  • Data – податоците што ги испраќаме и примаме од серверот (незадолжителен параметар)
  • withCredentials: дали се активирани интернет колачињата или не

Заклучок

Mithril е едноставен за пристап, пред сѐ за почетници. Тоа е минијатурна и елегантна рамка. Неговата брзо-рендерирачка структура е добро прилагодена за различни проекти. Mithril.js е брза и компактна рамка (framework). Документацијата на официјалната веб-страница е лесна за читање и имплементација.

Овој прв блог го опфати воведот во Mithril, споредба на перформансите со сличните рамки, како и објаснување и неколку едноставни примери за компоненти, XHR и рутирање.

Следниот блог ќе биде посветен на клучните концепти на Mithril – vnodes, autoredraw системот, клучевите, lifecycle методи и компоненти. Следете не и читајте го нашиот блог на: https://re4m.com/blog/.

Коментирај

Вашата адреса за е-пошта нема да биде објавена.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Слични статии