Min utvecklingsmiljö

2017-03-24

En utvecklingsmiljö kan se väldigt olika ut då dels vilka tekniker man använder skiljer sig åt från person till person men även på grund av att hur man arbetar kan vara högst individuellt. Jag tänkte i alla fall gå igenom den utvecklingsmiljö jag har utarbetat under min studieperiod.

Det här är ingen guide där jag med noggranhet går igenom varje detalj i min utvecklingsmiljö och förklarar samt motiverar utan det här är mest tänkt som en redogörelse om hur min utvecklingsmiljö ser ut i dagsläget.

Dator och operativsystem

Som operativsystem använder jag macOS då jag utvecklar på en Macbook Pro 13" (late 2013). Innan jag köpte min Macbook Pro använde jag Windows exklusivt och hade i princip inte använt Apples datorer alls och inte heller brydde jag mig om vad Apple gjorde i min periferi. Det ändrades såklart när jag köpte denna maskin, vars främsta syfte var att använda till mina studier och var inte riktigt nöjd med utbudet på windowsbaserade laptops.

Webbläsare

Då jag både äger en Macbook Pro och en iPhone 6 och nyttjar all synkronisering mellan dessa enheter till fullo använder jag Safari som min primära webbläsare "privat". När det istället kommer till webbutveckling använder jag primärt Google Chrome. Detta på grund av att jag tycker Chromes utvecklarvertyg är snäppet vasare än Safaris motsvarighet. Utbudet av plugins ligger även till Chromes fördel jämfört med Safari.

Vid sidan av användandet av Safari och Chrome har jag även Firefox installerad men använder inte lika mycket som Chrome för utveckling. Firefox används mest bara i de fall jag kollar om saker och ting fungerar som det ska i alla de populäraste webbläsarna.

Plugins

Jag har inte avsevärt mycket plugins installerade i Chrome utan det handlar i största grad om tre stycken plugins:

• LiveReload - laddar om webbläsarfönstret när ändringar görs i filerna.
• Take webpage screenshots - tar skärmdumpar på en hel webbplats även om webbplatsen är "längre" än datorskärmen.
• Vue.js devtools - enklare debugging av Vue.js applikationer.

Textredigerare

Min primära textedigerare eller text editor är Atom som har skapats av GitHub. Innan jag landade i att använda Atom provade jag på både Sublime Text och Coda. Anledningen till att jag gick vidare från de två är att jag tyckte att Atoms pakethanterare var bättre än den i Sublime Text samt hade bättre integrering med Git. Atom är enligt mig även mer visuellt tilltalande än Coda. När man spenderar mycket tid i en text editor är det ju viktigt att den är tilltalande och faller en i smaken, eller hur? Ytterligare en fördel med Atom är ju att den faktiskt är helt gratis.

En text editor jag dock börjar snegla på mer och mer är Visual Studio Code från Microsoft. Visual Studio Code har precis som Atom bra pakethantering av diverse plugins, teman och dylikt samt har en bra integration av Git.

Plugins

Även om Atom är väldigt bra i sin grundinstallation och kommer med relativt snygga teman och syntax highlighting finns det en del plugins jag använder, dels för att göra det mer visuellt tilltalande samt skönare för ögonen men också för att snabba upp själva utvecklandet.

De främsta plugins jag använder är följande:

• Atom Material - UI tema med Material Design.
• Dracula - syntaxtema.
• Emmet - gör det både enklare och snabbare att skriva HTML-kod.
• file-icons - gör det enklare att se filtyper då filikoner ändras beroende på filändelse.

Egentligen har jag mer plugins installerade i Atom än de listade här ovan, men de handlar mest om specifika plugins som exempelvis sköter syntax highlighting av blade-filer som Laravel använder. Listar inte alla dessa plugins då de är väldigt specifika för vilken typ av utveckling som görs.

När jag utvecklar i Atom med Material Design UI tema, Dracula syntaxtema och Source Code Pro som font kan det så ut ungefär såhär:

Homebrew

Den efterlängtade pakethanteraren för macOS

Såhär beskrivs Homebrew på den officiella hemsidan och det är precis det som Homebrew är. Vet man om linux eller har använt någon linuxdistrubition så kanske man vet om att det i linuxvärlden finns olika pakethanterare för att bland annat installera och underhålla diverse program, många gånger via terminalen.

Nu vet jag inte allt om pakethanterare i kontexten av linux och deras skillnader gentemot just Homebrew men jag kan nog sträcka mig till att påstå att Homebrew har gjort mitt liv som utvecklare lättare. När jag behöver installera något program, vare sig det är något CLI- eller GUI-baserat kollar jag alltid om det går att installera via Homebrew först.
Denna pakethanterare har gjort det lättare för mig att installera diverse hjälpmedel, såsom rbenv som hjälper mig att hantera olika versioner av Ruby. Jag har även installerat jq via Homebrew, som är en ClI-baserad JSON processor och som jag främst använder i samband med curl och API:er.

Terminal

En av de stora styrkorna enligt mig att använda macOS för webbutveckling är att ha tillgång till en unix-terminal. Från början var jag inte mycket för att använda en terminal i mitt utvecklande men med tiden har jag kommit att använda mig av terminalen allt mer och terminalen är till och med det första jag startar när jag påbörjar en session av utveckling.

Vad använder jag då för terminal? Jag använder inte den inbyggda terminalen Terminal.app till macOS utan jag använder iTerm istället. iTerm är ett mer kraftfullt alternativ till Terminal.app och även om jag känner mig avsevärt mycket mer produktiv med iTerm så nyttjar jag nog knappast 20% av fördelarna gentemot standardterminalen i macOS. Den främsta fördelen jag nyttjar är att kunna dela upp terminalfönstret i olika sektioner för att exempelvis starta en node-server i ena sektionen och hålla andra sektionen öppen för bland annat git. Detta gör att jag kan hålla koll på node-servern samtidigt som jag har händerna fria att fortsätta använda andra sektionen. Sektionerna gör att jag inte behöver öppna nya terminalfönster och inte heller flikar för den delen.

Tema

Precis som mitt syntaxtema till Atom använder jag Dracula som tema till iTerm då det finns ett tema anpassat efter just iTerm. När jag har ett terminalfönster öppet vid sidan av Atom blir det således mer enhetligt eftersom att jag kör samma färger till både terminalen och textredigeraren. Som terminalfont använder jag Source Code Pro.

Shell

För något år sedan bytte jag från bash till zsh, kanske av den främsta anledningen av att jag ville ha lika snygga terminal prompter som jag sett andra utvecklare ha på internet.
Till zsh använder jag även oh-my-zsh som bland annat innehåller plugins och teman för att göra livet med en terminal enklare. Temat jag använder till zsh heter avit och kanske inte är lika flashigt som andra zshteman som finns där ute men det duger för mig då temat är integrerat med git och bland annat visar om jag har ändrade filer att commita.

Så här ser det ut i alla fall när jag använder terminalen för att jobba med den här webbplatsen:

Stacks, ramverk och liknande

This is my stack. There are many like it, but this one is mine. My stack is my best friend. It is my life. I must master it as I must master my life

Ovanstående citat kommer urspungligen från The Creed of the United States Marine och handlar egentligen om vapen men jag tänkte att de orden lika gärna kunde ha handlat om stacks. Nu lever inte jag riktigt enligt citatet ovan utan skiftar ofta mellan olika stacks för att jag helt enkelt gillar att lära mig nya saker, att koda i lika språk, använda olika ramverk och så vidare. Men jag tänkte ändå presentera de stacks, ramverk och dylikt som jag använder i mitt utvecklande.

Frontend

På frontendsidan använder jag mest följande:

• Angular med hjälp av angular-cli för smidigare och snabbare utveckling av Angular applikationer. Angular-cli innefattar scaffolding av Angularprojekt, compoments, directives och så vidare. Utvecklandet av Angularapplikationer blir helt enkelt smidigare då man inte på nytt hela tiden måste skapa all "boilerplate code" själv.
• Vue.js använder jag framför allt i samband med Laravelapplikationer då Laravel har valt Vue.js som sitt standardbibliotek för frontend. Till Vue.js-baserade applikationer som inte är ihopkopplade med Laravel använder jag vue-cli för snabb scaffolding av Vue.js-projekt med hjälp av terminalen.
• Som preprocessor för CSS använder jag mig främst av Sass även om jag tidigare använt less också.

Backend

På backendsidan använder jag gärna följande:

• PHP tillsammans med MVC-ramverket Laravel.
• Ruby on Rails som precis som Laravel är ett MVC-ramverk.
• Node.js tillsammans med ramverket Express.
• MAMP finns även installerat men jag använder denna stack allt mindre och mindre.

Databas

Som standard använder jag främst databasen PostgreSQL som relationsdatabas och har väl egentligen mest nosat på NoSQL-databaser via RethinkDB och Firebase.

Hosting

När det gäller hosting av diverse projekt brukar jag använda mig av Heroku främst för att det finns en gratisnivå men också för att det går enkelt att använda git för deploy. Heroku har också ett behändigt CLI som man kan använda för att skapa och ta hand om appar skapade hos dem.

Övriga program

Utöver alla ovanstående program, verktyg och dylikt finns det några övriga program jag använder i min utvecklingsmiljö och dessa är:

• GitHub Desktop - ett GUI för versionshantering med Git. Även om jag använder en del gitkommandon i terminalen är det ibland skönt med ett GUI.
• Sketch - ett macOS-exklusivt program för mockups och prototyping.
• Postgres.app - det enklaste sättet att börja med PostreSQL till macOS
• Postico - ett GUI till macOS för PostgreSQL.
• Sequel Pro - ett GUI till macOS för MySQL.
• Postman - ett verktyg som jag använder för att testa API:er.
• Sip - en color picker som lever i toppmenyn på macOS.

Mer innehåll