Front-end-kehityksen parhaat käytännöt

Abstract

Opinnäytetyön tavoitteena oli yhtenäistää toimeksiantajan, CGI Suomi Oy:n tulevissa projekteissa verkkosivustojen ja -sovellusten front-end-koodia, parantaa sen ylläpidettävyyttä, nopeuttaa jatkokehitystä ja helpottaa uusien kehittäjien liittymistä tiimiin. Tiimi toteuttaa pääasiassa kaupan alan keskisuurten tai suurten yritysten verkkopalveluita. Tarkoituksena oli laatia ohjelmistokehittäjille yhteisiä käytäntöjä ja ohjeita oppaaseen. Opas käsittelee front-end-kehityksen eri osa-alueita: HTML-merkkausta, CSS-tyylejä, JavaScript-koodausta. Lisäksi määriteltiin sivustojen ja sovellusten selaintukeen, suorituskyvyn optimointiin ja esteettömyyteen liittyviä käytäntöjä.

Opinnäytetyö toimii kuvauksena oppaaseen kirjatuista käytännöistä, ohjeista ja tekniikoista. Tarkemmat selitykset rajattiin pois oppaasta, jotta se pysyisi tiiviinä ja kohderyhmälle soveltuvana. Opas on onnistunut tiimin kehittäjien kommenttien perusteella hyvin. He ovat kiinnostuneita aiheista ja toivovat lisää sisältöä jatkossa. Se jää kuitenkin vielä nähtäväksi, kuinka paljon käytäntöjä ja ohjeita tullaan hyödyntämään.

Opas toimii tällä hetkellä hyvänä lähtökohtana sivustojen ja sovellusten front-end-kehitykselle, mutta tarvetta on selvästi vielä yksityiskohtaisemmille, projektikohtaisille ohjeille. Siksi oppaan päivittämisen kannalta on tärkeää siirtää se pois dokumentista omaksi sivustokseen. Toinen kehitysmahdollisuus on räätälöidä opas muiden tiimien tarpeisiin sopivaksi.

The goal of this thesis was to help the applicant, CGI Suomi Oy, in creating better websites and web applications through best practices of front-end development. The main concerns were maintainability, faster development time and easier orientation for new developers joining the team, whose clients are most of the time medium to large size companies in the retail business. To achieve the goal, a guide was written containing practices, guidelines and descriptions of different techniques regarding aspects of front-end development. Those include HTML, CSS and JavaScript coding, cross-browser compatibility, accessibility and performance optimization.

The thesis contains descriptions of the guide’s contents and explanations why certain practices were included in it. Most of the detailed information was excluded from the guide to keep it relatively short and simple. What front-end development is and how the ever-increasing mobile usage of the web has affected the guide and the guides’ writing process are introduced in the first chapters. Rest of the content is about front-end coding and its techniques.

The guide was well received within the team. The developers were interested in the content and requested future expansions. The next step will be to recreate the guide as an HTML-based documentation. In its current form, it provides a good base for front-end development, but is too general and lacks much-needed documentation about different projects’ practices and guidelines.