Зашто би требало да користите ГатсбиЈС за израду статичних локација

Гатсби је временом растао и драго ми је што га видим како га користи огроман број веб локација попут маркетиншких сајтова, блогова и генерисаних статичних страница.

Оно што ме је привукло на првом месту било је несметано развојно искуство, невероватни резултати и топла заједница. Улазећи мало дубље у свој рад, екосистем и разговарајући о његовом потенцијалу са више програмера, натерали су ме на размишљање о томе колико је моћан - много више него што сам у почетку претпостављао.

Овај чланак жели да вас натера да видите зашто је стекао популарност. Ако га већ користите, стећи ћете бољу представу о функцијама које бисте могли да употребите за још веће искуство у развоју.

Имајте на уму да је то оно што ми одговара, а ја делим само своје ставове. Ни на који начин вам не кажем да је ваша тренутна поставка која вам одговара застарела, али само покушавам да поделим како је Гатсби био одличан за мене.

Шта је Гатсби?

То је још један статички генератор веб локација попут Хуга, Јекилла и тако даље. Па шта га чини посебним? Зашто посебно разговарамо о томе?

Гатсби се може користити за израду статичних веб локација које су Прогресивне веб апликације, прате најновије веб стандарде и оптимизоване су да би биле изузетно ефикасне. Користи најновије и популарне технологије, укључујући РеацтЈС, Вебпацк, ГрапхКЛ, савремене ЕС6 + ЈаваСцрипт и ЦСС.

То значи да многи програмери могу да ускоче без пуно криве учења, јер већ знају или су бар користили један део овог технолошког стека на којем је Гатсби изграђен.

Даље, желео бих да додам нешто што сам приметио радећи са програмерима који нису имали појма о најновијим оквирима и библиотекама и управо су навикли на традиционални начин израде сајтова у ХТМЛ, ЈаваСцрипт, ЦСС датотекама.

Приступ развоју

С једне стране, имамо кориснике који очекују глатко искуство на вебу налик апликацији. Друга страна су програмери, навикнути на веб локације које имају странице са ХТМЛ датотекама или можда користе неке шаблоне - у самој основи - странице као странице са унутрашњим повезивањем .

Ако започињете са неким од најновијих оквира, узмимо случај Реацт. Можете да покренете и покренете апликацију са минималном конфигурацијом помоћу апликације цреате-респонсе-апп. Али ако погледате структуру пројекта, почетнику или чак неким програмерима који долазе из других технолошких група можда неће имати пуно смисла. Узорак се прилично разликује од онога што сте икада раније видели.

То је зато што без додатних подешавања имају за циљ изградњу апликација за једну страницу, СПА-а. Да бисте додали рутирање, странице или оптимизацију за СЕО, биће потребно више алата и конфигурације.

То се не чини баш згодно када желите статичне странице, зар не? Дакле, ту је Гатсби, оптимизован за овај специфичан случај употребе. Ово би могло бити интуитивније за програмере, јер постоје странице креиране од компонената које прате основну идеју да су локације странице са унутрашњим повезивањем.

Карактеристике

Компоненте

Компоненте су кључна карактеристика Реацт-а, а сада су уобичајени образац веб дизајна. Са тренутним нивоом сложености корисничких интерфејса, готово је немогуће написати одрживи код на дугим страницама ХТМЛ-а или користити механизме за израду шаблона и очекивати доследност.

Уместо тога, градимо компоненте за вишекратну употребу, а затим их користимо за конструисање погледа. На овај начин имамо одвојене модуле који рукују одвојеним стварима, а њима је лакше управљати и одржавати их. Компонента само садржи све потребне информације, а Гатсби, пошто користи Реацт, следи исти образац.

Атомски дизајн је приступ који је добар начин за руковање сложеним интерфејсима и овде бисмо га могли ставити у употребу са Реацт компонентама. Брад Фрост има невероватан пост на блогу који описује шта је то и како то функционише.

Спајање Вебпацк-а и најновије алате

Вебпацк ствара оптимизоване, умањене пакете ХТМЛ-а, ЈаваСцрипт-а и ЦСС-а. Када је унапред конфигурисан са Бабел и више додатака, омогућава вам употребу најновијих ЕС6 + ЈаваСцрипт и ГрапхКЛ.

Залеђивање: уграђено је вруће поновно учитавање и подела кода, што даје боље искуство у развоју и боље перформансе сајта. Ово има за циљ да програмер напише минималну конфигурацију алата и да се више фокусира на стварни развој веб локације.

Гатсби додаци, стартери и Реацт пакети

Можете да користите било који од пакета које сте већ користили са НПМ-ом, посебно оне који реагују јер је изграђен на истој ствари. Али то није све: Гатсби заједница има велики број стално растућих додатака, стартера и трансформатора.

Готово никада не дођете до тачке када заправо морате да градите на сопственом алату или модулу, заједница већ нуди огроман број који одговара свим потребама.

Коришћењем ових, Гатсби се може проширити додатном функционалношћу. На пример, неколико примера укључују одзивне слике, офлајн функционалност, изворне податке из ЦМС-а и формате за означавање података, додавање независних услуга (Гоогле аналитика итд.) Итд.

Стилинг

Опет, сложени кориснички интерфејси значе сложене обрасце стила и само је питање времена када ће се табеле напухати. Добијате проблеме са специфичностима, листате стотине редова кода покушавајући да схватите ствари и на крају користите !importantда бисте заправо видели стил који сте додали.

Гатсби има подршку за СЦСС, ЦСС-ин-ЈаваСцрипт библиотеке, омогућавајући вам боље и лакше управљање стиловима. Чак је и подешавање за ово прилично једноставно за руковање инсталацијом додатка или пакета.

Респонсиве Имагес

Промена величине слика ради одзива на различитим уређајима, лење учитавање, коришћење srcsetsи picture... Већ звучи заморно када то треба да се уради ручно.

Иако је то данас захтев за перформансе и оптимизоване интерфејсе сличне апликацијама, не видимо много алата у које можемо директно да ускочимо и користимо их.

У међувремену, у Гатсби-у са само додатком, посебно оштрим за гатсби-плугин, можете директно да генеришете флуидне слике, додате филтере, мењате формате, замућујете оптерећење и још много тога. Ово штеди много рада и времена ручном променом величине слика и писањем експлицитног кода за реактивне слике. Такође вам пружа знатно боље перформансе уз углађеније корисничко искуство.

Искуство попут апликације

Повећавањем перформанси и карактеристикама које додају неометано корисничко искуство, Гатсби тежи потпуном искуству налик апликацији, позајмљивањем од пуних ПВА-ова. Нема поновног учитавања између страница када се користи гатсби-линк уместо хипервеза, а апликација и даље изгледа глатко и ефикасно захваљујући лењем учитавању слика и подели кода.

За сајтове који следе стандарде за које такође желите да буду ефикасни, имамо пуно ствари које треба да урадимо и водиче које треба следити: минификацију и групирање, кеширање прегледача и асинхроно учитавање скрипти или датотека итд. Када радите са фрамеворк-ом попут Реацт-а, имаћете више ствари око којих бисте требали да бринете, иако решава неколико проблема: подела кода, СЕО, рутирање ако је потребно, респонзивне слике и листа се наставља.

Гатсби тежи решавању свих ових проблема, уз мање времена утрошеног на алат, конфигурацију и окружење и више времена за стварно дизајнирање и развој странице.

Екосистем Гатсби

Додаци

Гатсби је направљен да буде проширив и флексибилан - коришћење додатака је један од начина да се то учини. Могу се директно инсталирати и користити за разне функције, укључујући омогућавање офлајн коришћења странице, додавање Гоогле аналитике, додавање подршке за уграђене СВГ-ове, листа је готово бескрајна.

Од различитих типова додатака Гатсби, додаци гатсби-соурце посебно преузимају податке из локалног или удаљеног извора и омогућавају да буду употребљиви путем ГрапхКЛ-а. Ови извори могу бити ЦМС-ови као што су Вордпресс, Друпал, Плоне, локално умањење, КСМЛ или датотеке, базе података, АПИ-ји и формати података као што су ЈСОН, ЦСВ.

То имплицира да се готово било шта уопште може користити као извор за рад са Гатсби-јем и генерисање статичких локација.

Напомена: ГрапхКЛ је језик упита за АПИ-је који ради на филозофији само тражења тачно оног што вам треба. За разлику од РЕСТ АПИ-ја, ви не тражите крајње тачке да бисте пружили своје податке и обрадили их из структуре која му је дата, већ радије тражите оно што желите и директно их користите. Прочитајте више о томе како то функционише и како га користити у њиховим документима.

Након инсталације, неки додаци се могу одмах користити тако што ће их се навести, gatsby-config.jsа други конфигурисати са објектом оптионс.

Идите да погледате библиотеку додатака Гатсби, она већ има прилично велики број додатака, а активна заједница их додаје још.

Стартерс

То су у основи узорци Гатсби веб локација које вам помажу да брзо започнете развој у зависности од тога о којој се локацији ради. Они вам помажу да директно почнете да радите на развоју веб локације, конфигурацији и основним карактеристикама о којима сте већ морали водити рачуна. Што значи, мање времена на алату, више времена за развој.

Гатсби додаци често имају одговарајуће почетнике који показују или служе брзом начину да започну са коришћењем. Они такође делују као референца која покрива све функције и изложбене конфигурације додатка који се користи.

Гатсби теме су карактеристика која се још увек развија, што вам омогућава да спакујете и поново користите ове функционалности и обрасце сличне ономе што се види у почетним верзијама. Прочитајте више о томе шта се спрема на блогу Гатсби.

Статичка места

Прво, погледајмо како Гатсби интерно ради. За разлику од СПА-а који дају АПИ захтеве током покретања апликације, Гатсби врши прикупљање свих података, укључујући податке из локалних датотека, током времена израде. Сви ови подаци се затим користе за генерисање статичких ХТМЛ, ЈаваСцрипт и ЦСС датотека. Овај статички приказ је оно што чини да ствари раде брже.

То је било пуно о Гатсбију, његовом екосистему и о томе како вам помаже да направите невероватне статичке локације. Али зашто бисмо желели статичне странице? Не звучи ли као корак уназад од динамичних?

  • Не захтевају сложено подешавање сервера са базама података, одржавање и немају проблема са скалирањем.
  • Подаци су потпуно сигурни. ЦМС-ови и АПИ-ји имају приватне функције, али подаци су и даље присутни на серверу који се може искористити. Гатсби узима потребне податке за приказ само из извора, а приватни или заштићени подаци нису ни присутни у коначној верзији. Што је најсигурније што може добити.
  • Уместо да се ослањате на сервере за динамичко генерисање страница, унапред их све прикажите на прављењу и употреби ЦДН-ова за изузетно брзо и глатко искуство за кориснике широм света.
  • Гатсби ради статички приказ. Што чини садржај доступним у ХТМЛ-у, а претраживач оптимизован, без дугог почетног времена учитавања.

Испробајте!

То би требало да баци мало светла на то шта је све око тога и зашто неке велике компаније одлучују да га користе на својим веб локацијама. Излог сајта Гатсби у последње време само расте, уз мноштво невероватних додатака.

Можда је време да умочите руке и погледате око себе!

Захваљујући ЦодеСандбок-у то можемо учинити одмах, у самом прегледачу.

Ако желите да га покренете локално, требало би да погледате гатсби-цли. То је најбржи и најлакши начин да започнете. Они такође имају невероватну документацију и упутства за вас како бисте могли заронити у развој веб локација на гатсбијс.орг.

Надам се да вам се свидео овај чланак и сматрали сте да се исплати. Све моје пројекте можете погледати на Гитхуб-у или Дрибббле-у и не оклевајте да ме контактирате на Твиттер-у!

Такође бисте могли погледати и друге моје чланке:

Прогресивне веб апликације: Премошћавање јаза између веб и мобилних апликација

Осим ако нисте живели испод камена, вероватно сте чули за ПВА или Прогрессиве Веб Аппс. Врућа је тема у праву ... хацкатхон извештај: медиум.фреецодецамп.орг Извештај: Шта можете кодирати за 30 сати? Поприлично!

Шта можете да направите за 30 сати равно? Као група студената друге године факултета са растућим портфељем посла ... медиум.фреецодецамп.орг АЦМ месец кода 2к17: Изградња Моодифи

Март је био прилично продуктиван месец, све захваљујући овом великом догађају који је организовало Удружење за рачунарске машине, НИТ ... хацкерноон.цом