En teknisk inblick i vår nya kontrollpanel

Vi arbetar för fullt med vår nya kontrollpanel. Allt är inte klart ännu, men för snart tre veckor sedan välkomnade vi våra kunder att testa betaversionen. Läs blogginlägget som publicerades i samband med det.

Vi är glada för all den feedback vi fått och jobbar vidare på flera förbättringar med siktet inställt på att den nya kontrollpanelen ska vara helt klar i höst.

Den absolut största skillnaden mellan den gamla och nya kontrollpanelen är hur den är uppbyggd och ramverket vi använder i botten. Eftersom vi har många teknik- och utvecklingsintresserade kunder tänkte vi berätta lite mer om tekniken bakom.

Dåtid

Den gamla kontrollpanelen – version 4 i ordningen – påbörjades redan under andra halvan av 2011 och släpptes sedan under 2012. Vi bestämde ganska tidigt att vi ville erbjuda en desktop-liknande känsla och lägga mycket funktionalitet i klienten istället för att ha serverrenderade vyer med JavaScript-strössel ovanpå.

Under 2011 var Single-page Applications inte alls lika vanligt som idag och de tekniska lösningarna som fanns tillgängliga spretade ganska brett. Valet föll dock på Backbone.js som var ett helt fantastiskt litet bibliotek om man tidigare var van vid det som idag ofta refereras till som jQuery-spagetti.

pattern-curly-bracket-2

Backbone.js var (och är fortfarande) ett väldokumenterat, enkelt och smidigt bibliotek som löste flera av de problem vi ville lösa. Vi hade dock ingen aning om alla de tekniska utmaningar som en stabil och flexibel Single-page Application kräver.

Backbone.js var helt klart en pionjär på den tiden men saknade stöd för både hierarkiska routes och vyer (Marionette.js dök inte upp förrän senare), krävde manuell setup/teardown för events och omrendering, hade inget koncept för återanvändbara komponenter m.m. Mycket av detta fick vi därför bygga själva och med det målade vi tyvärr in oss i ett hörn. Det blev allt svårare att underhålla befintlig kod och att lägga till ny funktionalitet tog alldeles för lång tid.

Vi är fortfarande väldigt stolta över den gamla kontrollpanelen, men när vi blickade framåt kände vi att vi var tvungna att kunna röra oss snabbare och enklare kunna testa nya funktioner utan att kodbasen höll oss tillbaka.

Nutid

Mycket har hänt under åren efter lanseringen av den gamla kontrollpanelen när det gäller Single-page Applications och JavaScript-världen i stort. Node.js har vuxit och blivit en accepterad del av många backends, Grunt har utmanats av Gulp, Brunch och Broccoli m.fl. ECMAScript 2015 erbjuder en betydligt trevligare syntax och mängden ramverk och bibliotek växer för varje dag som går.

Vi sneglade på, testade och utvärderade flera olika ramverk som alternativ till Backbone.js och efter att några av oss utvecklare besökt EmberFest i Barcelona 2014 kände vi att Ember.js var ett naturligt val för vår nya kontrollpanel.

pattern-ember-2

Tydlig struktur

Ember.js och framförallt Ember CLI ger oss möjligheten att använda en tydlig och väldefinierad struktur för både filer och koncept inom vår applikation – allting har sin plats och sitt ansvar. Detta gör det enkelt att hoppa mellan olika Ember.js-applikationer eftersom de är uppbyggda på precis samma sätt. Anställer vi fler utvecklare som jobbat med Ember.js tidigare är det enkelt för dem att känna igen sig.

❤ Ember CLI ❤

Ember CLI är verkligen det som gör Ember.js så trevligt att arbeta med. Det är ett verktyg som sköter allting kring din applikation. Man kan enkelt skapa nya objekt, köra tester, bygga och deploya applikationer via kommandoraden – vilket sparar både tid och minskar risken för manuella misstag. Utöver detta sköter Ember CLI hela ekosystemet kring alla de add-ons som finns tillgängliga.

Återanvändbara komponenter

Att bryta upp delar av vår applikation i separata och isolerade komponenter som är enkla att återanvända underlättar både utveckling och testning. Komponenter fanns inte som koncept i Backbone.js och vår egenbyggda lösning var krånglig att arbeta med.

Inkluderande community

Personerna som driver projektet är oerhört hjälpsamma och förstår vikten av att alla ska känna sig välkomna. Det är mycket det som har gjort att vi själva bidrar till Ember.js och har fått upp ögonen för öppen källkod i stort.

Mindre kod för samma sak

Faktum är att den nya kontrollpanelen innehåller mer funktionalitet än den gamla, men mängden kod är i stort sett halverad. Ember.js ger oss så mycket grundstenar att stå på vilket gör att vi kan fokusera på funktionerna i vår kontrollpanel istället för allting runt omkring dem.

Även glesys.se innehåller en Ember.js-applikation som sköter prisräknarna för våra tjänster VPS, Dedikerad och Colocation.

Framtid

Framtiden känns ljus och vi är riktigt taggade på möjligheterna som den nya kontrollpanelen med Ember.js i ryggen kommer att ge oss. Vi har redan skördat frukt i hur enkelt och snabbt vi kan testa nya idéer och funktioner utan att investera för mycket tid innan vi vet var det slutar – något som var omöjligt för oss tidigare.

pattern-numbers-2

Tack vare den nya kontrollpanelen känner vi oss bättre rustade för att kunna erbjuda ännu bättre tjänster till dig de kommande åren!

Testa den nya kontrollpanelen och maila gärna feedback till support@glesys.se.

Dela på X

Kom igång med GleSYS Cloud!