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

Permalänk

[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!

Permalänk
Medlem

Intressant guide, KIU! Ska vara med i LG's webOS tävling, har tänkt göra saker mha NodeJS då.

Permalänk
Medlem

Bra guide! Själv kör jag något liknande fast med Java/Scala i backend (Play Framework). Kör PostgreSQL som databas men siktar på att prova en dokumentdatabas inom kort. Angular är ett fantastiskt ramverk för front end-delen och det kan även jag rekommendera. Instämmer angående Yeoman! Går otroligt fort att komma igång med hjälp av det.

Permalänk
Medlem

Intressant, detta ska jag följa. Är väl mer för lågnivåprogrammering själv (programmerar helst i C) men har väl några projekt där jag tänkt försöka göra någon enklare webapplikation. Tycker ändå det är bra att veta vad som används av "de stora grabbarna".

Edit: Googlade lite på ämnet. Hittade SWIG. Då kan man alltså koppla sitt favoritspråk (C i mitt fall) som en extern modul till node.js så man slipper skriva så mycket JavaScript om man nu inte känner sig bekväm med det? Man gör själva applikationen i sitt favoritspråk och så begränsar man javascriptet till enbart webinterfacet? Är detta en vanlig lösning?

Hade annars fundering på en annan lösning - att köra webbservern som modul i mitt C-program (libmicrohttpd eller mongroove library). Men det känns som det blir komplicerat.

Permalänk
Medlem
Skrivet av Svenskunganka:

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)

Kan rekommendera Gulp som alternativ till Grunt. Speciellt om man föredrar att skriva sina tasks i ren JavaScript istället för att underhålla ett gigantiskt konfigurationsobjekt som man gör i Grunt. I princip alla plugins som finns till Grunt finns också till Gulp.

Permalänk
Skrivet av cfj:

Kan rekommendera Gulp som alternativ till Grunt. Speciellt om man föredrar att skriva sina tasks i ren JavaScript istället för att underhålla ett gigantiskt konfigurationsobjekt som man gör i Grunt. I princip alla plugins som finns till Grunt finns också till Gulp.

Gulp är definitivt ett väldigt bra alternativ till Grunt! Lägger till det i OP!

För er som är intresserade av min Node Vagrant Environment har jag lagt upp den på min Git här: http://git.svenskunganka.com/Svenskunganka/nodejs-vm

Bara att köra:

git clone http://git.svenskunganka.com/Svenskunganka/nodejs-vm.git && cd nodejs-vm vagrant up

så är du på god väg!

Permalänk
Medlem

Hej! finns det nån som kan ge mig råd? jag gillar webbutveckling vill börja studra men vet inte hur ska jag börja.
det finns ju olika riktning,front-end back end- osv.Jag gillar mest båda vill studera full stack.Har ni någonting att tipsa mig jag behöver eran råd och tips tack.

Permalänk
Medlem
Skrivet av Hameed:

Hej! finns det nån som kan ge mig råd? jag gillar webbutveckling vill börja studra men vet inte hur ska jag börja.
det finns ju olika riktning,front-end back end- osv.Jag gillar mest båda vill studera full stack.Har ni någonting att tipsa mig jag behöver eran råd och tips tack.

Jag hade skrivit ny tråd istället för att bumpa en 6 år gammal.

Angående studier så tycker jag du ska testa på lite själv först, finns mycket online gratis. Bl.a. Freecodecamp men sen även via youtube om man föredrar videotutorials.

Tycker du att det fortfarande är kul så står det mellan YH och högskola/universitet. Är du yngre kan högskola vara att föredra. Byter du bransch och vill komma ut och jobba så är YH bra.

Många utbildningar på YH är fullstack med lite mer viktning åt backend eller frontend. Sedan finns det renodlade frontend-utbildningar.

Permalänk
Medlem
Skrivet av zaibuf:

Jag hade skrivit ny tråd istället för att bumpa en 6 år gammal.

Angående studier så tycker jag du ska testa på lite själv först, finns mycket online gratis. Bl.a. Freecodecamp men sen även via youtube om man föredrar videotutorials.

Tycker du att det fortfarande är kul så står det mellan YH och högskola/universitet. Är du yngre kan högskola vara att föredra. Byter du bransch och vill komma ut och jobba så är YH bra.

Många utbildningar på YH är fullstack med lite mer viktning åt backend eller frontend. Sedan finns det renodlade frontend-utbildningar.

Kapar tråden lite grann istället för att göra en ny.
Jag går en YH (Frontend) nu, är det mer värt att försöka bli riktigt vass på "bara" frontend än att vara en halvbra fullstack?
Är väldigt nyfiken av mig och gillar både front och backend, pillar lika mycket med node/express/api och databaser som med HTML/CSS-kladd.
Enligt en del devs på youtube så anställs i princip ingen junior som fullstack.

Permalänk
Medlem
Skrivet av ChrisGBG:

Kapar tråden lite grann istället för att göra en ny.
Jag går en YH (Frontend) nu, är det mer värt att försöka bli riktigt vass på "bara" frontend än att vara en halvbra fullstack?
Är väldigt nyfiken av mig och gillar både front och backend, pillar lika mycket med node/express/api och databaser som med HTML/CSS-kladd.
Enligt en del devs på youtube så anställs i princip ingen junior som fullstack.

Fullstack kommer oftast med tiden, vissa lär sig aldrig fullstack för att man kanske inte ens tycker att en del av stacken är intressant. Andra har fallenhet för allt och blir bra på det. Själv är jag urusel på design så även om jag förstår CSS/SASS och React så ser mina hobbyprojekt oftast likadana ut för jag saknar fantasi.

Jag skulle sikta på att bli vass på en del av stacken. Ska man anställa någon så är det oftast för en roll, fullstack brukar generellt användas mer på startups eller mindre företag och då är det oftast mer erfarna utvecklare. Större företag idag anställer just för frontend eller backend och det är oftast uppdelat på företagen.

Blir du anställd som frontend och blir vass på det så kan du på arbetsplatsen säga att du vill lära dig mer om X och erbjudas möjlighet att jobba med backend i ett projekt. Det brukar bara vara uppskattat.

Men med det sagt så är det absolut inte fel att ha koll på hela stacken. Men välj sedan en inriktning att jobba med, den djupa förståelsen tar flera år att komma i.

Permalänk
Medlem
Skrivet av zaibuf:

Fullstack kommer oftast med tiden, vissa lär sig aldrig fullstack för att man kanske inte ens tycker att en del av stacken är intressant. Andra har fallenhet för allt och blir bra på det. Själv är jag urusel på design så även om jag förstår CSS/SASS och React så ser mina hobbyprojekt oftast likadana ut för jag saknar fantasi.

Jag skulle sikta på att bli vass på en del av stacken. Ska man anställa någon så är det oftast för en roll, fullstack brukar generellt användas mer på startups eller mindre företag och då är det oftast mer erfarna utvecklare. Större företag idag anställer just för frontend eller backend och det är oftast uppdelat på företagen.

Blir du anställd som frontend och blir vass på det så kan du på arbetsplatsen säga att du vill lära dig mer om X och erbjudas möjlighet att jobba med backend i ett projekt. Det brukar bara vara uppskattat.

Men med det sagt så är det absolut inte fel att ha koll på hela stacken. Men välj sedan en inriktning att jobba med, den djupa förståelsen tar flera år att komma i.

Tack för svar.
Jag har nog ett hyfsat öga för design och kan väl i sällsynta fall fastna i CSS-träsket längre stunder.
Gillar ju helheten men är generellt mer för logik än att kladda med design för mycket.
Förstår att det kan skilja sig men undrar hur det funkar när man jobbar på riktiga projekt på ett företag med det där,
typ någon i teamet är kär i design/CSS och tar på sig det och andra kan jobba på mer JavaScript osv, eller gör man lite av varje?

Permalänk
Medlem
Skrivet av ChrisGBG:

Tack för svar.
Jag har nog ett hyfsat öga för design och kan väl i sällsynta fall fastna i CSS-träsket längre stunder.
Gillar ju helheten men är generellt mer för logik än att kladda med design för mycket.
Förstår att det kan skilja sig men undrar hur det funkar när man jobbar på riktiga projekt på ett företag med det där,
typ någon i teamet är kär i design/CSS och tar på sig det och andra kan jobba på mer JavaScript osv, eller gör man lite av varje?

I många fall undviker man att skriva egen CSS, i alla fall i de projekten jag suttit i. En UX designer tar fram en mockup i Figma som frontend utvecklare arbetar efter. Den är anpassad efter bibliotek som Material-UI eller Bootstrap. Just för att man inte ska sitta och uppfinna hjulet själv.

Så skulle säga att de som sitter med frontend i våra projekt sitter mest med React/Angular och skriver i Typescript. Därefter använder de klasser från biblioteket, om CSS behöver justeras så är det på komponent-nivå.