ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!

  • 602 views
Uploaded on

Prezentacja na temat automatyzacji zadań w procesie tworzenia stron opartych na Joomla! W prezentacji zostały przedstaiwone sposoby automatyzacji w oparciu o Grunt.js oraz zostały pokrótce omówione …

Prezentacja na temat automatyzacji zadań w procesie tworzenia stron opartych na Joomla! W prezentacji zostały przedstaiwone sposoby automatyzacji w oparciu o Grunt.js oraz zostały pokrótce omówione możliwości tego rozszerzenia. Prezentacja była przedstawiana na JUG Silesia w dniu 14-go grudnia 2013, w Katowicach.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
602
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Witamnamojejdzisiejszejprezentacjidotyczącejautomatyzacjizadań w procesietworzeniaszablonów I rozszerzeńdlaJoomla!W porównaniu do poprzednichwykładów, temat ten będziesiębardziejskupiałnatechnicznychaspektachzwiązanych z tworzeniemstron WWW.
  • Ale zanimprzejdziemy do tematu, przedstawięsię.Nazywamsię Piotr Nalepa I z Joomla! mam styczność od 5 lat. Mniejwięcej od tegosamegoczasusięudzielamna forum Joomla! Gdziezawszesłużędobrąradą.Na początkuzaczynałem od tworzeniaprostychstron WWW, do czegoJoomla! sięidealnienadawała, a potemzacząłemzabawę z bardziejzaawansowanymirzeczamitakimijaktworzenieszablonówczyrozszerzeń.Obecniepracujęjakowebdeveloper w międzynarodowejfirmie, a w wolnychchwilachjestemwielkimfanempiłkinożnej (co nie jest zbytpopularnewśródprogramistów).
  • Odkilkulatprowadzęteżswojegoblogawebmasterskiego, gdziedzielęsię z ludźmiwiedządotyczącątworzeniastron WWW orazaplikacjiinternetowych.Przez ten czasuzbierałosiętrochęartykułówdotyczącychogólniepojętejwebmasterki, począwszy od efektówosiąganych z wykorzystaniemstylów CSS, poprzezróżnegorodzajuzastosowaniaJoomla! W codziennejpracy, a kończywszynapisaniudobregokodu JavaScript, czemupoświęcamostatnionajwiecejswojegoczasu.
  • Takjakwspomniałemwcześniej, tematemdzisiejszejprezentacji jest automatyzacjazadań w procesietworzeniaszablonów I rozszerzeńdlaJoomla!Kto z Was tworzystrony WWW lubaplikacjeinternetowe?Widzę, że jest kilkaosóbzajmującychsiętymnasaliinapewnomieliście “przyjemność” wykonywaniapowtarzalnychzadań, takichjak: kompresjaobrazków, np. Zapomocązewnętrznychstron WWW,Kompresjakodu CSS i/lub JS w celuzmniejszeniawagikońcowegopliku, a dziękitemuprzyspieszenieładowaniasięstrony,Sprawdzaniepoprawnościkodu, dziękitemułatwiejuniknąćniespodziewanychproblemówzwiązanych z wydajnością,Czyteż, przygotowaniekodugotowego do przekazaniaklientowilubwysłanianaWaszwłasny hosting.Bardzoczęsto, do tegowykorzystujesięwieluróżnychnarzędzi co wydłużaprocestworzeniastrony WWW.
  • Ale trzebapowiedziećsobie “STOP!” I zadaćpytanie: Czynie ma lepszegorozwiazaniaabyulepszyć ten procestak, abymniemusiał w kółkowykonywaćtychsamych, ważnych ale żmudnychczynności?
  • Owszem jest takisposób. NazywasięGrunt.js. Jest to modułdlaserweraJavascript – node.js, którymożemysobiezainstalowaćnawszystkichwiodącychplatformachsystemowych, takichjak Windows, Linux czyteż Mac OSX.Tymsamymsprawićabynaszapracabyłaznacznieprzyjemniejsza.
  • Abyzacząćkorzystać z Grunta, należymiećzainstalowanyserwernode.js, którypóźniejobsługujemyzapomocąliniikomend. Mam nadzieję, żehasło “liniakomend” niewprawiła Was w przerażenie,. Jest to fantastycznerozwiązanie, chociażproste w swojejpostaci.Po zainstalowaniuserweranode.jsmusimyodpalićdrugąkomendęnaliście, tj. ….. – dziękiczemumamyzainstalowanąobsługękomendmodułuGrunt.jsNastępnekomendy, instalująjużmodułGrunt.js w folderzeprojektu, a ostatnikomendaodpala go I dziejesięmagia. Potemna co dzieńjużbędziecieużywaćgłownietejostatniejkomendy.
  • Zanimjednakodpalimy 2 ostatniekomendywymienionenapoprzednimslajdzie, należyprzygotować 2 pliki: package.json I Gruntfile.js.Package.json jest to plik z danymi o projekcie, zwykłykod w formacie JSON – Javascript Object Notation.Możemy go wygenerować z automatuzapomocą komendynpminit.
  • Drugi z plików, Gruntfile.js jest plikiem w którymdefiniujemysposóbzachowaniasięmodułuGrunt.jsTo w nimokreślamyczychcemyabynamkompresowałplikiczyteżoptymalizowałobrazki, a możeaktualizowałautomatyczniestronę.Na slajdziewidaćprzykładowąkonfiguracjędlarozszerzeniauglify, któregozadaniem jest kompresjaplikówJavascript.
  • ZapomocąGrunt.jsmożemykompresowaćkodJavascript I kod CSS, dziękiczemuznaczącozmniejszymywagęplików, co przełożysięnaszybszeładowaniestrony WWW.Co zdecydowaniebędziezaletąjeślichcemyabynaszastronastworzona w Joomla! Szybkosięładowała w przeglądarkachdesktopowychjak I mobilnych.
  • DziękiGrunt.jsprzyspieszymyrównieżprocesyzwiązane z konwertowaniemkoduzapisanego w preprocesorachstylów LESS I SASS do kodu CSS. LESS I SASS są to programistycznesposobypisaniakoduodpowiedzialnegozawyglądstrony I pozwalająmiędzyinnyminawykorzystywaniezmiennychczyteżfunkcji. Ale to już jest tematnazupełnieinnąprezentację.Ponadto, możemyoptymalizowaćobrazki, którewykorzystujemy w szabloniedlaJoomla! Jest to ważne, ponieważ plikigraficzne (zdjęcia, tła) wygenerowaneprzezedytorygraficznetakiejak Adobe Photoshop niesączęstoodpowiedniozoptymalizowane I możnajeszczebardziejzmniejszyćichwagębezutratyjakości.Możemyrównież z takichobrazkówwygenerowaćsprite’yczylizestawobrazkówpołączonych w jedenplik I obsługiwanyprzezkod CSS. Bardzoprzydatnarzecz, jeślichodzi o optymalizacjęszybkościładowaniasięstron WWW.
  • Jedną z najciekawszychmożliwościGrunt.jsdlakażdegowebmastera jest automatyczneprzeładowywaniestronyzarazpozapisaniuzmian. JeślidodatkowoskonfigurujemysobieprocesdlaGrunt.jstakaby od razuwykonywałkompresjęplików CSS, JS orazobrazków to od razubędzieciemoglizobaczyćfinalnyefektWaszychpracprawietakjakby to widziałużytkownikWaszejstrony.Jest to jedna z najfajniejszychmożliwościGrunta I korzystam z niejna co dzień, bobardzoułatwiażycie.
  • Równieważna, przynajmniej z mojegopunktuwidzenia jest walidacjakoduzarówno JS jak I CSS. Dziękitemumożnauniknąćproblemówzwiązanych z niewłaściwymużyciemstylów CSS lub z nieprawidłowymsposobempisaniakoduJavascript.Takiepodejściezmniejszaryzykowystąpieniabłędu w wersjifinalnejwaszejstronylubrozszerzeniadlaJoomla!
  • Wspominałemrównież o tym, żeGrunt.jspotrafiprzygotowaćfinalnykodnadającysię do wysłanianaserwerhostingowygdziedocelowo ma sięznajdowaćstronalubprzygotowaćpaczkęinstalacyjną z najnowsząwersjąwaszegorozszerzeniadlaJoomla!Genialnasprawa!
  • A wszystko to po to, abyś Ty jakoprogramistabyłzadowolonyzeswojejpracy I jejwydajności, a przez to Twójklient, szeflubużytkownikTwojejstronyteżbędziezadowolony.Bo dziękiniemumożeciedostaćlepszykodfinalny,wktórymistniejemniejszeryzykowystąpieniabłędów I którypozwalaTwojejstroniesięładowaćznacznieszybciejniżgdybyśniekorzystał z tegotypurozwiązań.
  • Mam nadzieję,żeudało mi się Was przekonać do tegoabyusprawnićWasześrodowiskopracy z Joomla! ZapomocąmodułuGrunt.jsJeślichcielibyściepoczytaćwięcejnatemattegomodułyczyteżserweranode.jszapraszam do skorzystania z linkówktóresąterazwidocznenaslajdzie.Zapraszamrównieżnamojegobloga, gdziedzisiajlubjutrobędziemogliznaleźćwięcejinformacjiodnośniewykorzystaniamodułuGrunt.js w codziennejpracywebmastera.
  • Dziekujęwszystkimzauwagę. Czysąjakieśpytania?Jeślinie ma pytań, to życzęwszystkimWesołychŚwiąt!

Transcript

  • 1. ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia szablonów i rozszerzeń dla Joomla!
  • 2. KIM JESTEM? Piotr Nalepa - blog.piotrnalepa.pl 2
  • 3. MÓJ BLOG Piotr Nalepa - blog.piotrnalepa.pl 3
  • 4. W KÓŁKO TO SAMO • “Manualne” sprawdzenie poprawności kodu JS/CSS, • “Manualna” kompresja obrazków, • “Manualna” kompresja kodu CSS/JS, • “Manualne” przygotowywanie paczki z szablonem lub rozszerzeniem Joomla! Piotr Nalepa - blog.piotrnalepa.pl 4
  • 5. NIGDY WIĘCEJ! Piotr Nalepa - blog.piotrnalepa.pl 5
  • 6. GRUNT.JS Piotr Nalepa - blog.piotrnalepa.pl 6
  • 7. GRUNT.JS - INSTALACJA 1. 2. 3. 4. Node.js npm install -g grunt-cli npm install grunt --save-dev grunt Piotr Nalepa - blog.piotrnalepa.pl 7
  • 8. GRUNT.JS - INICJALIZACJA 1. Gruntfile.js 2. Package.json Piotr Nalepa - blog.piotrnalepa.pl 8
  • 9. PACKAGE.JSON { "name": "joomla-projekt", "version": "1.0.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-uglify": "~0.2.7" } } Piotr Nalepa - blog.piotrnalepa.pl 9
  • 10. GRUNTFILE.JS module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { src : ['**/*.js', '!*.min.js'], cwd : 'dev/js/', dest : 'prod/js/', expand : true, } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; Piotr Nalepa - blog.piotrnalepa.pl 10
  • 11. MINIFIKACJA KODU Automatyczne kompresowanie kodu JS/CSS po dokonaniu zmian w plikach. Piotr Nalepa - blog.piotrnalepa.pl 11
  • 12. PRZYSPIESZENIE PROCESÓW • Automatyczne przetwarzanie kodu napisanego w LESS lub SASS do CSS, • Automatyczna kompresja obrazków, • Automatyczne generowanie sprite’ów. Piotr Nalepa - blog.piotrnalepa.pl 12
  • 13. PODGLĄD ZMIAN NA ŻYWO Piotr Nalepa - blog.piotrnalepa.pl 13
  • 14. WALIDACJA KODU • JSLint/JSHint • CSSLint Piotr Nalepa - blog.piotrnalepa.pl 14
  • 15. KOD PRODUKCYJNY • Wyodrębnienie tylko najważniejszych plików projektu, • Kompresja obrazków, • Kompresja kodu JS/CSS, • Łączenie wielu plików w jeden główny, • Przygotowanie paczki instalacyjnej dla Joomla! Piotr Nalepa - blog.piotrnalepa.pl 15
  • 16. SZCZĘŚLIWY DEVELOPER = SZCZĘŚLIWY KLIENT Piotr Nalepa - blog.piotrnalepa.pl 16
  • 17. PRZYDATNE LINKI Grunt.js http://gruntjs.com/ Node.js http://nodejs.org/ Mój blog http://blog.piotrnalepa.pl/ Piotr Nalepa - blog.piotrnalepa.pl 17
  • 18. Piotr Nalepa - blog.piotrnalepa.pl 18