1. 1 Cutting Edge FE technologies for complex product August 6, 2015

2. 2 Krux.com Has more than 50 big clients Krux is the data decision system that helps brands, agencies and publishers increase revenue through smarter content, commerce and marketing experiences to people. Krux is a next-gen Data Management Platform (DMP) that unifies people data from multiple screens and sources, analyzes the data to identify and understand individual preferences and expectations, and activates the data across every channel in right time and real time. Krux's complete architecture delivers on-demand data insights that are actionable and help businesses sustain a virtuous cycle of valuable customer experiences.

3. 3 Overview of web application

4. 4 Front-end architecture global principles The core of web application is based on AngularJS framework with its extensions (Angular-UI, moment.js, underscore and etc.) 1 The UI modules and controllers as designed to follow OOP principles and created on CoffeeScript language 2 HTML code templates are created on Jade Template Engine 3 Charts visualization libraries Highcharts.js and D3.js 5 The styles are written using SASS preprocessor 4

5. 5 1. Running a static server on Node.js locally. The server is used as a proxy to forward requests to back- end 2. The client code with.coffee.jade and.sass files are compiled into.js,.html and.css files accordingly via Grunt task runner. 3. We use Grunt-Livereload plugin to run sources building and display changes in browser after any file modification. 4. The js and css files are united into single big files and linked to index.html page. On production environment the obfuscation is applied. 5. We use Apache server to handle static content on prod environment. UI dev environment: combine all together

6. 6 UI is designed as Node package, package.json { "name": "rb-ui", "version": "......", "devDependencies": { "bower": "1.3.12", "coffee-script": "1.9.3", "grunt": "0.4.5",........ }, "engines": { "node": "0.10.0" }, "scripts": { "bower-install": "bower install --config.interactive=false", "postinstall": "npm run bower-install", "start": "grunt server” …… }

7. 7 Bower - the browser package manager { "name": "rb-ui", "version": "0.0.0", "appPath": "app", "dependencies": { "angular": "1.3.15", "bootstrap-daterangepicker": "1.3.21", "codemirror": "4.6.0", "d3": "3.2.0", "d3cloud": "1.0.1", "es5-shim": "2.1.0", "font-awesome": "3.2.1", "highcharts-release": "4.0.4", "json3": "3.2.4", "masonry": "3.1.5", "moment": "2.10.3", …. and ~ 10 more UI libraries

8. 8 Grunt – JavaScript task runner Compiles CoffeeScript, Jade, Sass files 1 html minimizer 2 Files copying 3 Connect to livereload plugin 4 Watch the browser 5

9. 9 1. The CI environment (Jenkins) starts jobs to run unit tests against the BE part 2. Once the BE is compiled, CI starts job to compile the FE 3. Next jobs are responsible to create a debian package and deploy it on destination environment (dev or stage) Continuous Delivery approach Image of environment MySQL DB Puppet Debian Package Update internal servers with pipelines processing Update web servers with dynamic and static content. JENKINS JOBS create debian package Checkout dependences and apply repositories on environments Compile client side Running unit tests on server side part HTML5 / REST Automated tests are running against the code.

10. 10 So where is a focus on customer? The requirements get changed rapidly, we should react on it accordingly. 1 During the project life (2 years) we had to study from scratch a solid bundle technologies. 2 Customer reacts rapidly on market needs. We prepared several PoCs but not all of them are gone life. 3 The development process is extremely agile. We tried both Kanban and Scrum methodologies already. 4 Angular 2.0 and Scala are rising up, I believe we will get more challenges soon! 5

11. 11 Any questions?