logo

Rychlejší vytváření webových aplikací pomocí Angus

Nickova vynikající užitečnost, Angus, se změnila! Klikněte sem a přečtěte si aktualizovaný příspěvek!

Pokud jde o vytváření webových aplikací, je k dispozici několik nástrojů, které vám pomohou vyvíjet se rychleji. Existují GruntJS, GulpJS, Brunch a další, které zefektivňují váš pracovní postup provedením řady úloh sestavení:

  • Otestujte kód
  • Vyčistěte adresář sestavení
  • Zkopírujte zdrojové soubory do složky sestavení
  • Udělejte se svými zkopírovanými soubory nějaké kouzelnické triky, například nahraďte názvy proměnných.
  • Zkompilujte soubory Less nebo Sass
  • Dynamicky generujte značky skriptu pro svůj index.html
  • Spusťte webový server a otestujte svou aplikaci lokálně
  • Sledujte změny kódu a přestavbu
  • ...

Tyto nástroje odvádějí vynikající práci při rychlejším vývoji vaší webové aplikace. Huzzah!

Pojďme vytvořit další aplikaci!

Jakmile dokončíte aplikaci a začnete s novým projektem, opět byste chtěli mít dobrou konfiguraci sestavení. Optimalizovali jste konfiguraci sestavení vaší poslední aplikace tak, aby se sestavovala co nejefektivněji, a obsahuje několik skvělých triků, jako je úloha nasazení AWS S3, na které jste strávili pár hodin minulý víkend.

Je zřejmé, že chcete sklízet plody své tvrdé práce a používat tyto nové a optimalizované úkoly sestavení také ve své nové aplikaci. Co teď? Existuje několik způsobů.

Duplikování staré aplikace

Můžete jen zkopírovat, vložit svou starou složku aplikace, přejmenovat ji a začít pracovat. Problém nastává, když ještě dále vylepšujete nastavení sestavení. Nyní jsou pravděpodobně k dispozici novější a rychlejší úlohy sestavování, takže je můžete s nadšením začít implementovat do své nové aplikace. A wow, nyní je v nové aplikaci funkce měkkého obnovení CSS!

O několik dní později budete muset provést aktualizaci své staré aplikace. Bolestně si všimnete, že v konfiguraci sestavení staré aplikace chybí některé skvělé funkce. Stejně jako to měkké obnovení CSS a četné aktualizace výkonu, které jste provedli. Co teď?

Yeoman

Jedním z řešení problému je Yeoman, nástroj na lešení. Generuje vaši konfiguraci sestavení kladením otázek pokaždé, když vytvoříte novou aplikaci. Na jeho webových stránkách najdete spoustu generátorů, které zahrnují webové rámce a sestavovací úlohy, které byly pro vás nastaveny. Tyto generátory spravuje mnoho lidí a vy budete těžit z výhod jejich optimalizací, když vygenerujete novou aplikaci.

Generátory však nejsou dokonalé. Když jsou aktualizovány, aby zahrnovaly nové nástroje a optimalizace, zůstanete u staré konfigurace sestavení. Nemůžete jednoduše aktualizovat bez vygenerování a zodpovězení těchto otázek znovu . Kromě toho je pravděpodobné, že vaše ideální konfigurace sestavení vyžaduje změnu nebo přidání úloh, jako je nasazení AWS S3, které potřebujete pro svého konkrétního klienta.

Problém je v tom, že na konci dne opět duplikujete logiku. Pokud máte několik aplikací, je velmi pravděpodobné, že kroky sestavení jsou podobné, ne-li totožné. Pokud tam chcete něco změnit nebo přidat skvělou novou funkci sestavení do mnoha aplikací, máte smůlu.

Neopakujte se

Sestavení konfigurace je jako jakýkoli jiný kód. Neměli byste se opakovat a chcete znovu použít konfiguraci sestavení v různých aplikacích. Co kdyby existoval způsob, jak používat jednu konfiguraci sestavení pro všechny vaše aplikace?

Představujeme Anguse

Uprostřed rostoucí frustrace ze stavu věcí jsem se rozhodl vytvořit obecný a předem nakonfigurovaný rámec pro sestavení nazvaný Angus.

Angus je předem nakonfigurovaný build framework, který jednoduše naklonujete jako git repozitář. Uvnitř tohoto úložiště vytváříte své aplikace v apps/ složku, kterou Angus repo ignoruje. Pro každou aplikaci můžete definovat, které knihovny a kroky sestavení byste chtěli použít. Každá úloha sestavení je již nakonfigurována pro práci s jinými úlohami.

Rámec používá GruntJS k provádění všech kroků sestavení. Skvělé je, že nemusíte nic konfigurovat, stačí jen sdělit, které úlohy chcete u jednotlivých aplikací povolit.

Struktura projektu

angus/   <-- angus repository
    Gruntfile.js
    grunt/   <-- generic build tasks
    apps/
        hello-world/
        my-second-app/    <-- app sub repository
            assets/
            scss/
            app.js
            config.js
            index.html

Aplikace uvnitř!

Mnoha neznámým, repozitáře Git mohou skutečně existovat v sobě navzájem, aniž by se používaly raketové vědy jako submoduly. Uvnitř Anguse, apps/ složka je ignorována git. V apps/ můžete bezpečně vytvářet podsložky které mají vlastní úložiště ! Chcete-li tak učinit, jednoduše vytvořte složku uvnitř apps/ složku a spusťte git init .

Díky této struktuře můžete vyvíjet tolik aplikací, kolik chcete, aniž byste museli generovat nebo upravovat konfigurace sestavení.

Konfigurace každé aplikace

Každá aplikace v Angusu má svůj vlastní konfigurační soubor config.js . V tomto souboru můžete definovat knihovny Bower a říci Angusovi, které soubory z Bower skutečně potřebujete. Když například zahrnete Bootstrap, možná budete opravdu potřebovat jen pár .scss soubory.

**Example config file**
packages: [
    'angular',
    'bootstrap-sass-official'
],
// A list of files which this app will actually use from the bower packages above.
// Angus will look inside bower_components/ for these files.
libIncludes: {
    js: [
        'angular/angular.js'
    ],
    scss: [
        // Core variables and mixins
        'bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss',
        'bootstrap-sass-official/assets/stylesheets/bootstrap/_mixins.scss',
        'bootstrap-sass-official/assets/stylesheets/bootstrap/_grid.scss'
    ]
}

Spuštění aplikace

Jednoduše spusťte grunt dev a Angus se postará o zbytek. Ve výchozím nastavení spustí hello-world aplikaci, ale můžete předat —app=your-app nebo změňte config.json soubor v kořenové složce Angus.

Angus automaticky nainstaluje balíčky Bower, automaticky zahrne knihovny a obsluhuje vaši aplikaci. Dodává se s [podporou pushState](http://diveintohtml5.info/history.html), automatickým obnovením při změnách kódu a měkkým obnovením CSS při změnách CSS.

Nasazení

Angus také obsahuje grunt prod velení, které se stará o minifikaci, ošklivění a zřetězení. Výstup vašich souborů bude uvnitř dist/prod/ složku. Můžete dokonce nasadit přímo na Amazon S3 jedním příkazem.

Další úkoly

Můžete snadno povolit další úkoly, které má vaše aplikace provádět. Pokud používáte AngularJS, je pravděpodobné, že budete chtít používat běžné úlohy sestavování specifické pro AngularJS, jako je minifikování šablon, generování konstant a knihovna ng-min.

Skvělé je, že tyto úkoly jsou již předkonfigurovány! Stačí je povolit následovně v config.js soubor:

// In addition to the default task list (core/defaultTasks.js), also execute these
gruntTasksAdd: [
    'html2js',
    'ngconstant',
    'ngmin',
    'karma'
],

Budoucnost

Angus je stále velmi čerstvý projekt a doporučuji vám, abyste pomohli tím, že se podíváte na zdrojový kód a odešlete žádosti o stažení. V budoucnu možná přejdeme i na novější nástroje jako GulpJS nebo Brunch, ale se stejnou filozofií. Neopakujte se!

Doufám, že jsem vám poskytl nové poznatky o procesu vytváření webových aplikací a o tom, jak může Angus zvýšit vaši produktivitu. Vyzkoušejte to a dejte mi vědět, co si myslíte!