Vicert @ Coding Serbia 2014, Novi Sad – Part II

Coding Serbia conference was held for the second time in Novi Sad. It is an international conference gathering domestic and international companies and IT professionals. 

Vicert attended the second day of the conference, on Friday, October 10. and here is a retrospective and our impressions of presentations held.

CodingSerbia

We split the blog post into two parts for easier reading. Enjoy the second part. 

Big data processing the lean way – a case study – Siegfried Steiner

A presentation from Siegfried Steiner that shows how an e-commerce SaaS startup created their AWS infrastructure. Siegfried shows how they created their instances in the cloud to allow secure, asynchronous  architecture that will handle millions of requests.

From vertical to horizontal the challenges of scalability in the cloud – Pierre-Yves Ritschard

Yves is the CTO of exoscale, swiss based cloud hosting provider provides overview of hosting needs today and how cloud infrastructure provides a solution for developers to build today’s generation of applications. Yves covered scalability issues and ways how cloud hosting providers solve these problems.

Refactoring JavaScript applications – Jovan Vidic

Goal of the presentation was how to better organize client code (javascript)

In languages such as JavaScript, it takes a bit of discipline to write well-designed code. The JavaScript environment is so forgiving that it’s easy to throw bits and pieces everywhere and still have things work. Establishing system architecture early provides constraints to your codebase, ensuring consistency throughout.

Problems that existed in the previous version of the application

  • Javascript in HTML
  • Global functions
  • Inline styles
  • No tests

Goal

  • Improve code structure and design
  • more maintainable
  • easier to understand
  • easier to modify
  • easier to add new features

Refactoring tools      

  • Node.js (NPM)
  • Require.js
  • GRUNT – JS Task Runner
  • Bower
  • Jasmine + Karma
  • JSLint
  • Selenium Webdriver IO

He made walk through how to craft your code into well-organized components that can be reused in projects to come.

Module pattern  

JavaScript Module pattern provides a way to wrap public, private methods (and variable) into a single entity and exposing only the public members to the world outside of module.    Module based coding eases the effort for maintenance and increases reusability. Managing dependencies between modules is a major concern developers face throughout the application development process. https://carldanley.com/js-module-pattern/  

RequireJS  

RequireJS is a JavaScript file and module loader. http://requirejs.org/  

<script data-main="scripts/main" src="scripts/lib/require.js"></script>    

The data-main attribute defines the initialization point of the application. In this case, it is main.js. RequireJS uses main.js to look for other scripts and dependencies.  

main.js – example


requirejs.config({
     paths: {
          "jquery": "lib/jquery.min",
          "bootstrap": "lib/bootstrap.min"
     },
     shim: {
          "bootstrap": {
               deps: ["jquery"]
          }
     }
});

Module – example (The Revealing Module Pattern)       

The Revealing Module Pattern allows us to use the same kind of syntax for all our internal constructs, only deferring to object-literal notation at the end, to return (or reveal) the public members. https://carldanley.com/js-revealing-module-pattern/    

var MyModule = (function() {
     var myPrivateData = 303;
     function myPrivateFunction() {
          alert('private');
     }
     var myPublicData = 42;
     function myPublicFunction() {
          alert('public');
     }
     return {
          myPublicData : myPublicData,
          myPublicFunction : myPublicFunction
     };
})();

Manage dependencies

NPM stands for Node Package Manager.  NPM is the default package manager for Node.js. https://www.npmjs.org/  Bower is Node.js packaged module and we only need NPM to download it.  

Bower is a package manager for the web. It will manage all your web files: javascript, css and images. http://bower.io/  

npm install -gbower bower.json – example


{
     "name": "javascript-refactoring",
     "version": "1.0",
     "authors": [
          "Savo Garovic "
     ],
     "private": true,
     "ignore": [
          "node_modules",
          "bower_components",
          "test",
          "tests"
     ],
     "dependencies": {
          "jquery": "1.11.1",
          "bootstrap" : "3.2.0",
          "requirejs" : "2.1.15"
     },

     "devDependencies": {

     }
}

Grunt – The JavaScript Task Runner http://gruntjs.com/    

  • Grunt is a task-based command line build tool for JavaScript projects.
  • The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.
  • After you’ve configured it through a Gruntfile, a task runner can do most of that mundane work for you with basically zero effort.

Tests Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code.   http://jasmine.github.io/

Example


describe("A suite", function() {
it("contains spec with an expectation", function() {
  expect(true).toBe(true);
});
});

Selenium

Selenium is a set of different software tools each with a different approach to supporting test automation. Selenium automates browsers. One of Selenium’s key features is the support for executing one’s tests on multiple browser platforms. http://www.seleniumhq.org/

Yeoman

Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive. The Yeoman workflow is comprised of three core tools for improving your productivity and satisfaction when building a web app. http://yeoman.io/

These tools are:

  • Yo

Yo is maintained by the Yeoman project and offers web application scaffolding, utilizing scaffolding templates we refer to as generators. You typically install yo and any generators you think you might use via npm.  

  • Bower  

Bower is a package manager for the web which allows you to easily manage dependencies for your projects. This includes assets such as JavaScript, images and CSS. It is maintained by Twitter and the open-source community.  

  • Grunt  

Grunt is a task-based command-line tool for JavaScript projects. It can be used to build projects, but also exposes several commands which you will want to use in your workflow. Many of these commands utilize Grunt tasks under the hood which are maintained by the Yeoman team.  

Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective.

All materials from the Coding Serbia conference can be found at the following link: http://saspes.com/en/2014/10/12/coding-serbia-conference-2014/

 

Tech Team

Author: Tech Team

When a couple of our Devs and TLs come together magic happens!

Leave a Reply

Your email address will not be published. Required fields are marked *