WordCamp Workshop

Tömähti uusi workflow

Git

Composer

Vagrant

WP-kehittäjille

Kuka?

  • WP-intoilija, open source -kehittäjä ja hakkeri
  • Devaaja Seravo Oy:ssa
  • WP-palvelun pääkehittäjänä vuodesta 2014
  • 5 kuppia kahvia työpäivän aikana

Miksi Git?

  • Versionhallintana erittäin suosittu
  • Github.com tarjoaa ilmaisen koodihostauksen ja mahtavan yhteisön kehittyä paremmaksi
  • Jouheva yhteistyö muiden kanssa 
  • Mahdollistaa skriptien ajamisen tallentamisen yhteydessä

Miksi Composer?

  • Auttaa pitämään kolmannen osapuolen koodin versionhallinnan ulkopuolella (pluginit, teemat)
  • Voit lukita lisäosien versioita toimiviin kokonaisuuksiin
  • Parempi tietoturva hyökkäyksistä tulleita koodi-injektioita vastaan

Miksi Vagrant?

  • Voidaan matkia tuotantoympäristöä omalla koneella
  • Varmistutaan, että kaikki kehittäjät käyttää samoja binaareja, versiota, konffeja jne...
  • Helpompi kehitysympäristön pystyttäminen

Eiköhän aloiteta jo!

Tarvittavat ohjelmat

Esimerkkinä nykyaikaisesta WordPress-pohjasta käytämme Githubista: Seravo/wordpress

Asennus

  1. Asenna Vagrant (1.7.2 tai uudempi)
  2. Asenna VirtualBox
  3. Avaa terminaali ja aja seuraavat komennot:
# Kloonaa git-repository itsellesi haluamaasi sijaintiin
$ git clone https://github.com/Seravo/wordpress ~/Projects/wordpress-dev
$ cd ~/Projects/wordpress-dev
# Asenna tarvittavat lisäosat vagrantille
$ vagrant plugin install vagrant-hostsupdater vagrant-triggers
# Käynnistä Vagrant ja vastaa skriptin kysymyksiin (y/n)
# tai valitse oletus asetukset painamalla enteriä
$ vagrant up

Käyttäminen

Aina kun tallennat työsi gitillä, git ajaa vagrantin sisällä automaattisesti läjän testejä, jotka varmistavat että kirjoittamasi muutokset toimivat.

$ git commit -am "change index.php"
==> Running tests in Vagrant...
==> Checking syntax errors...
==> Running rspec tests...
testing http://wordpress.dev...
....
doing the cleanup...

Finished in 4.49 seconds (files took 3.34 seconds to load)
4 examples, 0 failures

==> Tests passed!
[master 39e71d6] change index.php
 1 file changed, 1 insertion(+)

Sisäänasennetut

Extraherkut

Gulp + Browsersync

  • Lataa automaattisesti selaimen kun koodiin tulee muutoksia.
  • Pitää jokaisen sivulla olevan selaimen synkronoituna.

Katso esimerkki täältä


# Käynnistä gulp + browsersync Vagrantin sisällä
$ vagrant ssh -c 'cd /data/wordpress && gulp'

xDebug & Webgrind

Onko koodisi hidasta? Tsekkaa mistä se johtuu profiloimalla!

# Käy haluamallasi testi sivulla ja lisää profilointi parametri: XDEBUG_PROFILE
# Esimerkiksi etusivu:
http://wordpress.dev/?XDEBUG_PROFILE
# Avaa webgrind:
http://webgrind.wordpress.dev
# ja klikkaa 'update'

Mailcatcher

Testaa sähköpostin lähetystä lähettämättä sitä!

Rspec

Integraatiotestit wordpressiin!

# Example test which logins to admin-panel
describe "admin-panel" do
  before do
    visit "https://wordpress.dev/wp-login.php"
  end

  it "There's a login form" do
    expect(page).to have_id "wp-submit"
  end

  #Only run these if we could create random test user
  if username
    it "Logged in to WordPress Dashboard" do
      within("#loginform") do
        fill_in 'log', :with => username
        fill_in 'pwd', :with => password
      end
      click_button 'wp-submit'
      # Should obtain cookies and be able to visit /wp-admin/
      expect(page).to have_id "wpadminbar"
    end
  end
end

Kiitos

Jos sinulla heräsi kysymyksiä, voit ottaa yhteyttä:

Tutustu myös:

WordCamp Workshop about modern Dev Tools

By Onni Hakala

WordCamp Workshop about modern Dev Tools

Presentation about development with modern tools. As an example we use: github.com/seravo/wordpress

  • 1,976
Loading comments...

More from Onni Hakala