Right Said Fred (or was it Taz?)

Bygget

Som ni säkert fick höra i steg 6 – fördjupning så hade jag en hel del kritik på JavascriptMVC och p.g.a missar i dokumentation så var det en riktig påfrestande resa att bygga applikationen. När jag väl kom in i hur ramverket fungerade så tycker jag att det funkar väl okej – men absolut inte mer än så.

Som utvecklingsmiljö valde jag Komodo IDE och vad ska jag säga.. det funkar ju *rycker på axlarna* Men jag tycker inte det var överlägset bäst.. att programmet hade  code-completion o.s.v kunde jag lika gärna vara utan därför att det är så extremt sällan jag behöver det i Javascript (stark betoning på extremt sällan). Förmodligen beror detta på att det inte är så många olika funktioner i Javascript. När jag kodar i PHP som har betydligt mer så är code-completion en stor hjälp.

Resultatet

Jag tycker applikationen och layouten blev riktigt bra om man bortser från allt negativa med JavascriptMVC – om det hade varit en annan struktur så hade jag känt att applikationen vore en fullträff samt något att vara stolt över.

I efterhand så insåg jag också att det var overkill att använda en databas som backend.. det hade räckt med att bara använda localstorage därför att 5mb är en hel del. När man skriver in text motsvarade 5mb så misstänker jag att hela ytan är upptagen ändå. Dessutom om det bara hade varit localstorage utan php och mysql så hade det varit mycket smidigare och lättare att lägga upp flera instanser – förmodligen behövs ingen webserver ens.

Lärdomarna

I diket så lägger jag JavascriptMVC för alltid såvida jag inte är absolut tvingad att använda det igen. Ett open source-projekt som detta SKA ha en bra dokumentation. Punkt! Behöver hitta en annan struktur eller designmönster som jag känner är bra – att bara ha en bra OOP-struktur (så gott det går i Javascript) räcker inte för applikationer som har mycket Javascript.

Det var ändå nyttigt tycker jag att kämpa på med någonting istället för att bara dumpa det – en bra sak i arbetslivet där man inte kan få allt som man vill (oavsett om man är anställd eller eget företag).

Javascript och kursen

Jag tycker inte att jag lärt mig så mycket nytt om Javascript i sig vilket är lite av en besvikelse. 3/4 av det som steg 2 – avancerad Javascript bestod av har vi redan gått igenom. Skulle snarare rekommendera för denna kursen och programmet Webbprogrammerare att lyfta ur en del moment ur den första Javascript-kursen till denna RIA-kursen (den första kursen var riktigt avancerad – lite för mycket). Men jag tycker det var kul att skriva en Javascript-applikation där jag kunde välja vad jag ville jobba med.

Citerar kurswebben lite grann:

"JavaScriptMVC är, precis som namnet antyder, ett ramverk för att strukturera
 JavaScriptapplikationer enligt Model-View-Controller-paradigmen. Är du bekväm
 i denna så är JSMVC en het kandidat att bygga din app i!"

.. het kandidat? ehm.. nä, JavascriptMVC ska slängas i en soptunna som dom gör i programmet Plus

Webbnisse

Jag tror det finns få människor som verkligen kan specialisera sig inom ett eller ett fåtal områden när det gäller webben. Om man har ett eget företag så kan man absolut göra det men inte om man är anställd därför att dom har alltid så höga krav att den anställde ska kunna a, b, c, d, e, f.. och gärna g, h, i.. o.s.v. Sen blir det förstås naturligt att man är bättre på en eller några saker.

Redan innan jag började på Webbprogrammerare så hade jag mycket kunskap om PHP/MySQL/Javascript så för mig är det bara naturligt att det är den vägen som jag är bäst på. Jag bygger mer än gärna en applikation med mycket Javascript men det beror också på vad det är för projekt – det är inte alltid lämpligt att ha mycket av just den smaken.

Här kommer det =) Blev kanske lite långt (18minuter).. men poppa lite popcorn eller satt på kaffe

( klicka på bilden )

Inre och yttre skönhet

Denna veckan har jag jobbat med både inre skönhet i applikationen i form av omstrukturering men även yttre skönhet i form av lite nytt gränssnitt. Själv så tycker jag att det blev lite bättre och lite renare samt enklare i gränssnittet. Så här blev resultatet:

Dessa saker har ändrats i gränssnittet:

• Mindre topbar
• Inga dropdowns
• Länk (gul) till ändra namn och ny grupp
• Ikon med länk till en hjälpsida
• Varje grupp har två stycken actions till höger, inställningar och ny scribble
• För chrome har nu alla textareaor css-regeln resize:none

Förutom detta så har jag då jobbat med lite omskrivningar av koden. Det jag har gjort är:

• Alla modeller är statiska
• Lyfte ur kod ifrån main_controller och skapade ett objekt för grupper

Kan tyckas som en kort lista men främst omskrivningarna tog sin tid som även gav fler fördelar – läs längre ner. Sedan spenderade jag 6 till 7 timmar att testa och försöka få ihop en fin lösning för att flytta en scribble mellan grupper men efter jag lagt ner så mycket tid så hade jag nästan en lösning fast det skulle ha tagit många timmar till för att slutföra så jag avbröt det och tog bort koden. Men om jag skulle implementera en sådan funktion så vet jag nu att då måste man skapa en egen drag’n'drop-funktionalitet med en trigger (dubbelklick eller shift-tangenten t.ex) för override med area-begränsningen (drag’n'drop endast inom gruppen)

Jag satt och testade om jag vid en override bara kunde ändra contraint som redan finns i jQuery Window-pluginet men detta fungerade inte alls. Den inställningen kan bara göras vid initiering och inte efteråt. Sedan satt jag även och testade med jQuery UI’s draggable och droppable men då fick jag problemet att draggable tog över drag’n'drop-funktionen så det inte blev någon begränsning inom gruppen. Det gick inte heller att skriver över specifika funktioner i draggable (drag, start, stop, create t.ex) så att den inte tog hand om drag’n'drop men då slutade droppable att fungera.

Så den lösning som jag kom en bra bit med var att ha egen drag’n'drop via DOM level 2  (kod ifrån en tidigare kurs så jag skrev inte allt ifrån noll) och sen måste man ha events som kan reagera eller beräkna när en scribble har släppts i en annan grupp. Ett alternativ kan eventuellt vara om man kan skapa ett skal för draggable (utan drag’n'drop dock) som är kompatibelt med droppable. Men som sagt; det skulle ha tagit minst lika lång tid till så jag la ner det p.g.a tidsbrist.

När jag skriver detta så trillar det ner en idé till.. om man använder draggable + droppable och sen implementerar man en egen constraint-funktion så man inte kan dra utanför en grupp – om man kan avbryta en drag’n'drop i en event i draggable förstås.

Omstruktureringen

Det blev väldigt många fördelar tycker jag med omstruktureringen och främst att lyfta ut koden för en grupp till ett eget objekt. Dessa förbättringar blev det:

• Ansvaret för en grupp ligger i ett eget objekt istället för i en controller
• Vid lägga till/ta bort grupp så ändras html-strukturen direkt istället för att rendera om alla grupper
• Lättare att implementera och hantera funktionaliteten för actions i en grupp
• Bättre koduppdelning för framtida utveckling
• Mindre databasanrop då rendering av ny grupp/ta bort grupp sker direkt i html-strukturen

Förutom dom punkterna så gjorde jag även så att då en ny grupp läggs till eller en grupp tas bort så centreras scribbles för dom andra grupperna.

Textareaor

Som jag nämde ovan så la jag till en css-regel så iaf chrome inte skulle automatiskt lägga till resize. Dock så är det en regel specifik för chrome så det är inte någon standard. Det kan vara intressant att skriva hur man löser en sådan sak och det jag fann så finns det främst två stycken lösningar. Den första är:

textarea {
     resize:none
 }

.. och som sagt; bara för chrome. Detta var som det jag valde därför att den andra lösningen skulle betyda att jag måste lägga till events då en scribble ändrar storlek och göra nya beräkningar. Så här ser den andra lösningen ut som är fullt css-kompatibel i alla webbläsare:

textarea {
   width:400px !important;
   min-width:400px !important;
   max-width:400px !important;
   height:400px !important;
   min-height:400px !important;
   max-height:400px !important;
 }

Som synes så specifierar man alltså bland annat min och max-höjd samt anger att reglerna är kritiska att följa (!important).

Tangentbordskommandon

Denna punkten tycker jag låter väldigt intressant och funderade på om det är nått som kan läggas till men sen kom jag fram till att det vore bara ett begränsat antal kommandon man kan lägga till på smidigt sätt så jag övergav den tanken. Om man skulle ha ett snabbkommando för settings i en grupp och då det är fler grupper; hur skulle man bygga snabbkommandon då?

Ajax back and forward

Även denna tycker jag låter väldigt intressant men framförallt nyttigt.. dock inte användbart i min applikationen därför att jag bara har en “sida” som allting lever på.

Dynamisk grafik

Detta är redan något som finns sen i implementationen och främst manipulering av html-dokumentet. Ett exempel är då jQuery UI dialog används så lägger jag in html-koden (en div-tagg) för dialogen i slutet av html-dokuemntet för att sedan låta pluginet sköta magin och göra det till en fin dialog. När användaren sedan är klar (ok eller cancel) så tas div-taggen med dialogen bort ifrån dokumentet.

Avslutning

Jag tycker själv det här projektet blev riktigt bra och med lite mer jobb så kommer jag definitivt att visa upp denna applikationen i min portfölj. Dessutom kan jag tänka mig att det är en användbar applikation i riktiga situationer och inte bara en skoluppgift.

Projektet kan beskådas här och koden finns här (deployment 1.0-mappen som är lite rensad från filer som inte behövs).

Slutresultatet

Innan jag börjar att berätta om resan så kommer här två skärmdumpar ifrån slutresultatet:

Så blev det =) Fast du vill säkert testa själv.. eller hur? Studsa hit

Om det blir ett fel ifrån backend så gjorde jag så att felet kunde “blöda igenom” och visas på en “blue screen of death” som kunde se ut så här:

Just denna funktionen tyckte jag blev riktigt bra och väldigt hjälpsam då jag gjorde liten miss nånstans och glömde ett semikolon till exempel. Annars så “fastnar” gärna ett sånt här meddelande och man behöver öppna firebug för att se vad det var som egentligen hände.

Resan

Jaa.. var ska jag börja? Det har varit en kurvig resa genom implementationen vilket beror på brister i JavascriptMVC som jag valde att jobba med. Vanligtvis skulle ha jag ha dumpat ramverket p.g.a såna här brister men denna gången så höll jag envist kvar och genomförde implementationen.

1. Anropa controllers!?

Hur ända in i tusan anropar man en controller då det inte är via vanliga URL’s? Enligt dokumentationen finns det två sätt som man kan göra detta:

//1. Create a new controller directly:
new Todos($('#todos'));
//2. Use jQuery function
$('#todos').todos();

Det första sättet fungerade…. nästan. Controllern skapades men det blev ett javascript-fel med att ett element inte kunde hittas. Så det andra sättet (även kallat short-hand) var det enda sätt som fungerade för mig.

2. Controller init/setup

Så här kan koden se ut för en controller:

jQuery.Controller.extend('MyScribbles.Controllers.Main',
/* @Static */
{

},
/* @Prototype */
{

}

Återigen enligt dokumentationen så i den statiska delen ska man kunna (bör?) ha en init-funktion som har hand om att skapa gemensamma inställningar o.s.v. Problemet var dock att då jag hade det där så slutade shorthand-funktionen (se punkt 1) att fungera vilket gjorde att jag inte kunde anropa controllern alls. Meeen enligt dokumentationen så ska det gå – var det “skit bakom spakarna” eller brister? fortsätt läsa..

3. Vyer

JavascriptMVC har ett inbyggt system för vyer och templates som stödjer flera olika språk. Det jag körde med kallas för EJS och kan se ut på detta sättet:

<div id="<%= divid %>" title="Confirm removal" style="display:none;">
    <p>Are you sure you want to remove the group '<%= group %>'?</p>
</div>

Här kan man se att denna template lägger in två variabler som skickas till vyn (divid och group). Förutom det så är det vanlig HTML-kod givetvis. Man kan också använda javascript-funktioner i en vy så här:

<% for(var n=0; n<groups.length; n++) { %>
    <!-- do something -->
<% } %>

Så när jag glad i hågen jobbade med vyer så fick jag problem när applikationen vägrade att ladda vyn som hette “form_setname.ejs”. Felmeddelandet var bara att filen kan inte hittas. Så jag spenderade cirka 4 (!) timmar med att felsöka detta – kontrollera filnamn, läsa dokumentation och kontrollera sökväg m.m. Till slut så hittade jag orsaken (INTE med hjälp av dokumentation!); en vy kan inte heta nånting med underscore därför att det finns inbyggda regler hur namngivning ska ske som tolkar det helt åt pipskogen.

Denna namngivningen är också sammankopplad med funktionsnamn.. Shorthand-funktionen “my_scribbles_main” blir så p.g.a dessa regler. Det egentliga namnet är MyScribbles.Controllers.Main. Med en hel del tänkande inser jag att namngivning med camelcase blir tydligen avdelat med underscore som “MyScribbles” blir “my_scribbles” vilket betyder att det måste tolkats som att “form_setname” så skulle filen ha hetat “formSetname”. När jag sedan tog bort underscore så fungerade det alldeles utmärkt.

Från design till implementation

Min ursprunliga skiss hur jag skulle implementera gjorde jag med några små ändringar:

• Ett nytt objekt som heter Scribble (prototype-baserad) för att kunna instansiera och sköta allting som har med en scribble att göra.
• Ett statiskt hjälpbibliotek till hela applikationen med funktioner för att t.ex visa ett ok/fel-meddelande.
• Implementerade biblioteket jQuery Window som sköter om en scribble med inbyggda funktioner för fönsterhantering helt enkelt.

Slutsats

Förutom dom tre problemen jag listade under resan så när jag skulle ladda upp projektet till mitt webhotell tänkte jag gå över ifrån development-läge till production. Vad tror ni händer då? SPLATT! Jahopp.. där dog applikationen – bara att fortsätta köra i development då.

Så jag är inte direkt imponerad utav JavascriptMVC p.g.a alla brister där den största är dokumentationen som är rörig och även delvis felaktig. Såna projekt bara SKA ha en riktigt bra dokumentation – punkt slut.

Jag tycker att hela JavascriptMVC-projektet är inte speciellt stabilt och överlag en känsla av; implementera MVC-modell i Javascript bara för att det går. Men jag blev bekant med en väldigt intressant del som jag inte kände till innan, nämligen vyer och templatesystem för Javascript. Så skulle jag göra en rekommendation så vore det att skriv på vanligt sätt med en smart uppbyggnad av objekt och använd sedan någon templatemotor. Jag såg att det finns ett flertal olika projekt och lösningar just för detta.

Först mot slutet av implementationen så kom jag in i ramverket och började känna mig bekväm samt förstod hur det fungerade. P.g.a det så kom jag aldrig in på de andra delar som finns i JavascriptMVC som automatiska tester. Jag vet sen innan att man måste kunna språket och miljön man jobbar med för att kunna skriva tester – annars tar det bara tio gånger längre tid där hälften är slöseri.

Källkod

Den aktuella källkoden som jag strippade på en del onödigt ligger under “trunk/deployment version 1.0″ – visa hos Google Code

App, app papegoja?

Jag tänkte att jag skulle gräva ner nosen i JavscriptMVC som ser ut att vara en vettig och intressant sak om man ska bygga en applikation som består av mestadels Javascript och massa AJAX-kommunikation.

Det finns ett flertal olika delar som default med bl.a testning så jag kommer dyka in i grunden och de delar som skickas med. Jag har även kikat på t.ex CouchDB som ser intressant ut men jag väljer att köra på en klassisk MySQL-databas via PHP som levererar data i JSON-format till applikation. Det är  något som jag redan kan vilket betyder jag får mer tid åt JavascriptMVC.

Själv applikationen blir en dela-notes-applikation med PHP och MySQL som backend då. Ingen användarautensiering utan det blir öppet för alla. Specifikation:

• Javscript med AJAX-anrop (JSON-data)
• Backend i PHP + MySQL
• Frontend i JavascriptMVC + jQuery
• Funktioner (kan komma att ändras):
  - gruppera anteckningar (även grafiskt visa/placera i en grupp)
  - CRUD anteckning(ar)
  - CRUD grupper
  - drag’n'drop av en anteckning
  - byta bakgrundsfärg på anteckning
  - spara namn via kaka eller html5 localstorage

En annan intressant sak som jag tänkt lite grann på vore om man kan exportera/impotera anteckningar eller skapa en synkning ifrån en annan instans – men det är en funktion som får hamna på kanskelistan.

Design

När jag sitter och pysslar med designen så märker jag att jag behöver sätta mig in mer i ramverket JavascriptMVC samt även testa för att förstå mig på det vilket jag ska ta tag i helgen. Dokumentationen är inte helt klockren vad jag sett hitills och den bästa sidan för att komma igång förutom Get Started (en kort tutorial bara) heter Rapid Start.

Men jag har kommit så här långt iallafall:

Intro (controller)
- hämta namn ifrån Modellen User.get (retunerar en sträng eller false)
- visa sidan “skriv in namn” vid false eller till huvudappen om det är en sträng.

Main (controller)
- vid start; hämta alla grupper och gruppernas scribbles samt rendera gränssnitt
- koppla nödvändiga events

User (model ifrån html5 localstorage eller kakor)
- get (retunerar en sträng eller false)
- save (retunerar false eller true)
- update (retunerar false eller true)

Group (model ifrån php->databasen)
- getAll (retunerar en array av objekt eller false)
- save (retunerar false eller id)
- delete (retunerar false eller true)
- update (retunerar false eller true)

Scribble (model ifrån php->databasen)
- getAll (retunerar en array av objekt eller false)
- save(retunerar id eller false)
- delete (retunerar false eller true)
- update (retunerar false eller true)

Mockups

Här är några bilder som jag satte ihop för att få en lite mer grafisk bild hur jag tänkt mig.. gränssnittet kommer med största sannorlikhet att finslipas och förbättras

Så ser det ut Kodskelett m.m finns att kika på här.

Skrivmiljö

Normalt så brukar jag sitta och knacka i programmet PHPEd men dom har tyvärr inte fullt stöd för Javascript utan bara lite grann. Så det uppfyller inte kraven för kursen.. Aptana eller Netbeans då? Nej tack – jag vill inte att min gamla dator (eller jag rättare sagt) ska sluta som Crazy german kid på Youtuben Alla program som Aptana eller Netbeans som bygger på Eclipse är fruktansvärt sega på min dator.

Så jag vände blicken åt andra håll och kikade mer på miljön Komodo IDE och det uppfyller kursens krav men efter en snabb titt så känns det inte lika klockrent som PHPEd dock.. En vanesak antar jag *rycker på axlarna* Komodo har även ett plugin för JSlint så det är ju bra iaf. Jag ger ingen garanti att jag kommer fortsätta med Komodo efter kursen oavsett om jag skriver PHP eller Javascript – kanske kommer mitt förstaintryck att förändras.

Testmiljö

Den främsta webbläsaren som jag utvecklar för är senaste Firefox-versionen tillsammans med gosiga Firebug och Web developer toolbar. Sedan kommer jag även använda Chrome som sekundär testwebbläsare.

Internet explorer är precis som Evil hamster och kommer inte stödjas eller testas. Kanske funkar det ändå i den och då blir IE-användare nöjda men det bjuder jag på.

Versionshantering

Jag testade med Github men fick inte igång det riktigt. Andra gången som jag grejar med Github och förstår inte varför alla är så förälskade i det.. säkerligen beror det på att jag vill att saker ska funka och inte sitta tre timmar med att få en enda sak att fungera korrekt. En gång i tiden (för några år sedan) var jag en riktig Linux-nörd som kunde sitta en hel helg med att finslipa och installera en distribution.

Sååå… jag kör med ett SVN-repository ifrån Google Code. Om man vet vad man gör så funkar SVN klockrent tycker jag. Här finns projektet.

Tappa-fil-lådan

..eller Dropbox som det egentligen heter. Jag får väl ställa mig i skamvrån för jag har aldrig haft ett sånt konto. Meeen nu så är det uppsatt och trots att programmet kraschade två ggr så ser det nyttigt ut.

Kodsnuttar

Jag blev förtjust i Pastie som är rent och snyggt.. JSFiddle ser intressant ut också men det känns lite överkomplicerat tycker jag.

För er alla andra eventuella läsare… denna kategorin kommer vara inlägg och rapporter till kursen RIA-utveckling med Javascript på Linnéuniversitetet VT2011.

Vem är jag?

Jag kan rekommendera en kik på sidan Om mig där det finns lite bilder som beskriver mig rätt så bra tycker jag. Från början var jag en inföding i Smålands landskap men har flytt därifrån till Västmanland och utanför Västerås.

Min resa inom webbutveckling började i slutet av 90-talet med strider i IE4 i hopp om att IE5 skulle bli guld och gröna skogar.. meeeen vi vet väl alla hur det gick det. haha! Jag satt och utvecklade en liten intranät-webbplats åt ett företag i klassisk ASP för att några år senare gå vidare till PHP. Gjorde många hobbyprojekt med lite av varje och även lite frilansjobb då och då.

När jag i mitten av första decenniet på 2000-talet inte hade så mycket jobb eller anställning började jag så smått att dra mig mot en högre utbildning. Från början var tanken Elektronikingenjör så jag slogs med massa mattekurser (hej och då) men sen slutade jag på Webbprogrammerarutbildningen =)

Jag och Javascript

Innan jag började på Webbprogrammerarutbildningen så var jag en typisk klipp-och-klistra “ninja” med Javascript och kunde lite grundsyntax samt förstod lite grann.. men jag var inte speciellt bra. Sen i Javascript-kursen i åk1 (med papperstenta som jag aldrig kommer glömma) så fick jag lära mig hur Javascript funkar på riktigt och det var ungefär då jag började använda skojiga ramverk också. Min favorit är utan tvekan Jquery men jag har testat även Mootols vet jag.

Tycker det är riktigt kul med Javascript och möjligheterna som det ger.. annars är webbsidor och applikationer rätt så tråkiga i sig utan kryddan ifrån JS.

Ser fram emot RIA-kursen och vad mer jag kan lära mig.. =) Node.js och även Closure compiler är det som jag tycker verkar mest intressant för mig.