[Guide] - Webbutveckling på en högre nivå

Hejsan allihopa! Tänkte eftersom jag är ny här på forumet så tänkte jag bidra till kakan lite och dela med mig av den kunskap som jag besitter inom Webbutveckling.

Introduktion
Denna guide är för både nybörjare och lite mer avancerade webbutvecklare som vill gå till nästa nivå - till er som vill göra riktigt bra, framtida applikationer.
Först och främst vill jag berätta åt vilket håll webbutveckling rör sig mot. Simpel, statisk webbutveckling blir mer och mer populärt, och med de nya ramverken såsom AngularJS gör det mycket lättare att utveckla riktigt snabba webbapplikationer.
Med dagens 3:e parts services kan du utveckla webbapplikationer, mobilappar, desktopprogram och CLI program i webb-baserade språk såsom HTML, CSS och Javascript. Framtiden ligger definitivt i Javascript då det kan köras både client-side (i webbläsaren) och server-side (med NodeJS [Node]).

Att kunna objekt-orienterad Javascript är ett stort plus då du kan skapa i princip vad som helst med det. Node har funnits ett tag, men det är inte på senare tid som det har blivit riktigt bra, snabbt och stabilt. Till skillnad från PHP har du full kontroll över Node. PHP är primärt skapat för att köras på webben, bakom en webb-server såsom Apache eller nginx. Med Node kan du göra vad som helst, du kan skapa din egna webb server, webb applikation, FTP server, TCP server, mm allt i ett projekt om du så vill det. Med Node behöver du inte heller använda systemet lika mycket som med PHP. Tex så kan du skriva dina cron jobs direkt i Node och inte i Linux crontab som du skulle vara tvungen att göra med PHP.
Då Node är par med C på socketing och I/O så är det riktigt bra för att skriva t.ex en FTP-server eller webb-server. Det som gör Node så bra är dens Package Manager kallad npm (Node Package Manager). Med den kan du installera moduler som du vill använda dig av med ett simpelt CLI kommando såsom npm install grunt-cli -g. -g flaggan gör så att det blir ett globalt paket installerat över hela systemet. Efter det kan du sen använda grunt CLI och göra riktigt schyssta saker för utveckling, tex minifiera all client-side JS, CSS och ge bilder ett nytt namn, tex "bild.jpg" blir "97d4d2-bild.jpg".

Node är också ett non-blocking, asyncronous språk vilket gör att du kan köra tex tunga databas jobb, kompilera ett program, generera saker, etc på en och samma gång sedan ha en callback funktion som väntar på att allt de blir klart. Medans dom jobben körs kan du göra andra saker i koden, såsom verifiera att en användare är inloggad, hasha deras lösenord, etc. Allting samtidigt vilket gör att din applikation blir snabb och du sparar mycket tid.

Node är ett single-threaded språk, så den kan endast använda en processorkärna, men det går att gå runt med node's inbyggda cluster där du kan spawna en master-process som spawnar child-processes på resterande processorkärnor, där alla child-processer jobbar tillsammans, vilket gör att din app blir ännu snabbare.

Vad jag använder mig utav under Node utveckling
Jag använder mig utav många olika paket för att göra mitt liv som utvecklare mycket enklare.

• För version-control använder jag mig utav Git.

• För att slippa installera databas-servrar på min dator såsom MySQL, MongoDB eller Redis använder jag mig utav Vagrant som är ett CLI för att simpelt skapa Virtuella maskiner på din dator som du själv kan ställa in för provisioning, så när du skriver vagrant up i terminalen hämtar Vagrant den specificerade VM box (tex ubuntu 14.04 64-bit) och kör den provisioning som du specificerat (tex sudo apt-get install mysql-server)

• Använder Yeoman för att scaffolda mina appar på bästa möjliga sätt innan jag böjar utveckla dom.

• Yeoman fungerar perfekt med Grunt, och Grunt är det som kommer spela störst roll för dig som utvecklare för du kan automatisera dina builds, minifiera vad du vill, compilera vad som helst, osv. Och det bästa med det är att du skriver din Gruntfile i Javascript (där du specificerar vad du vill Grunt ska göra)

• Använder mig utav Bower som är som npm fast för client-side javascript. CLI syntax är samma som npm, tex bower install bootstrap.

• Jag använder aldrig SQL-drivna databaser såsom MySQL, utan endast Document-drivna databaser såsom MongoDB och snabba Key:Value stores som Redis. Redis sparar all data direkt i RAM-minnet så Redis är RIKTIGT snabbt. Då Javascript's Object är precis som Documents i MongoDB och som Key:Value i Redis så behöver jag aldrig skriva några riktiga queries, utan endast kommandon.

• Är relativt ny till AngularJS, men det är ett ramverk för client-side Javascript som är grovt mycket snabbare än vanilla Javascript. Det är grovt snabbt, du använder dig utav bower för att installera paket som andra byggt, tex schyssta animationer. Det är byggt som ett MVW ramverk (MVW = Model View Whatever - där Whatever betyder "Whatever works for you"). Sitter dock fortfarande lite med jQuery men försöker förflytta mig till AngularJS helt och hållet.

Vad du behöver

• NodeJS - För tillgång till npm och köra Node applikationer.

• Git - Det bästa version-control systemet som existerar.

• Oracle VirtualBox - Vagrant behöver det för att skapa VM's.

• Vagrant - Sjävla vagrant. Leta efter färdiga Vagrant boxes som passar dig på GitHub! Tips: använd git clone kommando

• Yeoman - npm install yo bower gulp -g (Yeoman är primärt för Angular, men finns vissa NodeJS scaffolds också)

• Grunt - npm install grunt-cli -g - alternativt Gulp

Efter du har allt detta är du ready 2 go.

Det jag rekommenderar nu är att läsa dig in på alla olika paket såsom Git, Vagrant, Grunt, Yeoman, och NodeJS. Om du redan kan Javascript är det ett stort plus för du skriver Node applikationer i helt vanlig Javascript, samma som i webbläsaren.
En riktigt bra Yeoman generator för Angular och Node är Angular-Fullstack skapad utav DaftMonk på GitHub. Där är allt skrivet på ett sätt så Angular tar hand om alla "sidor" som finns, och Node används endast som ett stort API som Angular kallar, vilket gör att hela applikationen blir väldigt snabb då nästan allt ligger front-end. Du kan välja att scaffolda ett login-system om du vill kika på det! Fullstack kommer också med en färdig Gruntfile som är riktigt bra. Bl.a så kompilerar den LESS till CSS och minifierar det, samma sak med Coffeescript till JS (Du kan välja om du vill köra vanilla CSS och Javascript eller om du vill skriva i LESS och Coffeescript när du kör generatorn första gången).

Många utav er kanske tycker att det är överdrivet att ha så mycket för en simpel development environment men tro det eller ej, jag har sparat hundratals timmars jobb på att använda mig utav allt detta. Yeoman's scaffolding har nog sparat mig mest tid. Vagrant hjälper mig ha en environment som är i princip samma som production environment, samtidigt som den håller min jobbdator fri från installationer av databaser som startas upp samtidigt när datorn startas och slöar ner den, etc. När jag har jobbat klart behöver jag bara skriva vagrant halt så stängs den virtuella servern ner och frigör RAM-minne, processorkraft, etc. Många av er kanske har WAMP eller MAMP installerat på er dator, det betyder att ni har Apache, MySQL och PHP installerat på era datorer och segar ner systemet. Jag har en skräddarsydd Vagrant VM för såna projekt.

Notera
Jag är inte klar med denna guide, jag kommer lägga in fler saker med tiden. Just nu så får ni nöja er med det som jag har skrivit ihop hittills. Om ni har frågor eller tips så är ni mer än välkomna att skriva ett svar!