tivity presentation

8/9/2019 Tivity Presentation

http://slidepdf.com/reader/full/tivity-presentation 1/19

INTRODUCTION

location.aggregator.mobile.webapp

http://ac.tivity.in



CONTENTS

Chapter 1 - introduction to tivity. introducing the app structure

Chapter 2 - detailed app description homepage listing detail Page settings about other

Chapter 3 - code structure technologies used - summary project scaffolding angular scaffolding and dependency injection testing LESS

dependency environment build environment deployment environment Chapter 4 - mobile development concept (app-specific) HML optimization CSS optimization assets optimization javascript optimization angular optimization

network perormance

Chapter 5 - project workflow & management versioning github github issues system & commits

Chapter 6 - technologies used angularJS grunt

bower.io HML5 LESS karma jasmine phantomJS nodeJS github mongoDB mongoLabs - MongoDB as a service expressJS - nodeJS web application ramework

heroku pubNub



INTRODUCTION

INTRODUCTION

a short introduction to

tivity

‘tivity’ is a airly practical location aggregatorweb-app, it etches location inormation nearthe user which can be sorted by different cate-gories. Te list o venues/location is generatedbased to the relative proximity to the user. Teuser can search and inspect different locations,the oursquare locations have different statisticsto display to the user in order to decide where

he wants to go.

Te structure is airly simple (being a demoapp), and the entire pragma is centered around

finding really ast places near your current location and to present them to the user, basedon the search/category criteria.

Te main purpose is to have the users return as ofen as possible to the webapp, the mainactors here are that webapp perormances are looked upon as pretty bad, web applica-tions do not get as much traction as native applications.

Te idea o a web app that is used inside a browser is to SEEM [not actually be] ast, userhave a hard time discerning between native and web app perormance on a mobile phone,so their expectations are the mostly same, which [understated] is a big issue or web apps.

For the average user, i the app does not give any indication/interaction the interest peekis lost afer a ew seconds, with user having high end smartphones afer 1-2 seconds, sothe main goal is to have a really quick response or the user to see that what he is doingis returning some results, even i we do not present him with inormation rom the firstsecond, but a sort o indicator that the app has loaded and its doing something, things likeloading screens, indicators o content etc. v



STRUCTURE

homepage

searchlisting

detail page

excludefavorites

settingsabout

listingdifferent

categories

gmaps route[future]

In short you can access pretty much every page rom every location through the ooter menu.



DESCRIPTION

detailed description of

the application

I’m trying to make the project presentation as good as possible or the sake o posterity, even i Iactually don’t have a lot o detailed inormation, because it is not so relevant in the scope o this DEMOapplication.

Te juicy parts are in the way the application is built, the technologies used, and so on and so orth,thereore I will concentrate most o my ocus to add quality content in that part o the project specs.

DESCRIPTION - homepage and listing

Te homepage will be mainly or loading reasons only, giving the user a sense o speed, re-sponsiveness to his actions. You can call it a golrified loading screen.Te listing on the right is the first unctional page o the site, the first section that is loadingby deault is the ood section, this can be later changed on the settings page. From here on

the user can get anyhwere in the application, either by chaging the category, opening a venue,searching or a venue, or accessing about and options page rom the drawer.

“ Fair warning, some o the eatures de-scribed in the pages below aren’t evenimplemented yet, the application is still awork in progress, this document is only apresentation o what’s to come. ”



DESCRIPTION - geolocation, drawer and search

Momentarily, afer the ‘loading screen’the user is asked or permission tolocation, I should ask or the locationbeore the homepage, and store the

values or later use.

the drawer, the all access location tothe rest o the site.

search bar popping in existence,I’m thinking o making it appear onpulling up.



DESCRIPTION - detail page

Te venue detail page is populated withall the inormation I am provided withrom oursquare.

Te plan is or me to connect to multiplelocation providers (Google Maps, Bing

Maps, GyPSii, Yelp!, witter Places API)and aggregate their data to display a morecomprehensive list around the user.

Other providers will surely have a muchmore badly documented inormationabout the locations we are searching, butnonetheless ...



DESCRIPTION - maps and gallery

Foursquare also provides me a set o pho-tos to display as a carousel.

Having the location data o the location Iam connecting to the gMaps API in orderto create a map.

In the uture I’d like to create a route romthe current location to the venue location.

ABOU and SEINGS

pages are not done yet.



CODE STRUCTURE

webapp code structure top

to bottom

CODE STRUCTURE

echnologies

this is selexplanatory

AngularJSit is the backbone o the entireapplication, no pun intended

Karma estRunnerRuns javascript sanity tests on

the app’s code, not used yet, Ihave to maketests or everythi

MongoDBis the permanent storage solu-tion I am using or this appli-cation, saves JSON objects.

Grunt askRunner

takes care o all the aspects othe environment, build, ver-sioning, deployment, compile

Jasminelanguage used to create teststhat are run by Karma.

MongoLabsProvides MongoDB as a service, and a RESull interaceto connect upon.

Githubrepository, project manage-ment, bug & eature reportingservice

Bower.ioA package manager or theweb. Provides vendor librariesor the application(Angular...)

AngularJSit is the backbone o the entire

application, no pun intended

expressJSnode.js web applicationramework, providing a ro-bust set o eatures or node.js

HML5

using some API’s rom it.URL’s etc.

Node.jsused at the moment like acontainer to run the app. Willuse it or proper routing.

HerokuTe application is deployedon a Heroku node.js applica-tion

PubNubRealtime notification service.Not used yet.

Tis is a summary o what I am using. On Chapter 6 thereis a ully description on how I am using each one o thistechnologies/libraries etc.



Project Scaffolding

CODE STRUCTURE - Project Scaolding

Tis is the main project structure.

As a small starter, this application is kept together and

built by grunt, which relies on nodeJS, we also have alot o grunt add-ons that take care o automation or us(clean, copy, jshint, concatenate, watch, ugliy, karma,ngmin, html2js, coffee, change log, bump and protrac-tor, we’ll be discussing this in the next chapter )

/karma holds the karma configuration, we are telling karmawhere to search or test and how to run them

/node_modules is a suite o modules that get installedwhen running npm install, supporting sofware, grunt,grunt-cli, karma etc.

/production is our production older, there we have anodeJS server and it’s dependencies, grunt compiles auto-matically the source project and copies it in the productionenvironment, rom there it’s pushed to heroku.

/src is our source files, where I’m working in

/strippedLibraries is a older where I am putting libraries that I will ully integrate into my app, unlikethe vendor older (below) in libraries I have bits o only the code I need or my app.

/vendor is older that is populated by bower with all the dependencies I speciy in bower.json (angular:-animate, -cookies, - hammer, -local-storage, firebase, lodash etc etc)

.bowercc tels bower where to install the dependent libraries, it has “directory” : “vendor” in it.

.bower.json is the reerence point or bower, it contains app version and dependency libraries like

“angular-ui-router”: “~0.2.7”

.build.config.js contains a set o reerences called by grunt when compiling the project, file locations,build dir variables etc and a link to the vendor files

.CHANGELOG.md is sel explanatory, afer running to `grunt bump` to build a new version I run

`grunt changelog` to add a new entry in the change log which I’m adding explanations to.

.Gruntfile.js is the main grunt file where all the grunt tasks are created and ran rom.

.package.json is the file that contains the dependencies when running ’npm install’, like “grunt-con-trib-ugliy”: “~0.2.7”, it also contains versioning and other descriptor elements



Angular Scaffolding

CODE STRUCTURE - Angular Scaolding and dependency inj.

In here we have 4 main olders, `app`, `assets`, `common`,`less`

`src/app`Te app older is the application’s main development struc-ture, every page/route is in its separate older, at the rootbeing app.js, the main app js file that calls recursively all thelower olders, this task is actually taken care o by grunt,grunt scans the olders or js files, and on a new build it addsa reerence in index.html using the <script type=”text/javas-cript” src=”<%= file %>”></script> tag.

In every older we have 4 files, the template/partial o thatpage, named *.tpl.html, the javascript file, the Jasmine testfile (which is run by karma) named *.spec.js and the less filecorresponding to this template.

In the uture I will put here a *.e2e.js file to run END to ENDtests with protractor and Selenium.

`src/assets`

Tis older contains all our static assets, icons, images, onts etc. Tey will also be minified by gruntwith the proper tasks, not implemented yet, we could use the https://npmjs.org/package/grunt-reducegrunt add-on and create a task or it to minimize and compress all the png/jpg/gi files. Another goodoption is to automatically (with another grunt plugin) make rom all o them a big sprite to be ac-

cessed rom the CSS or with some exotic templating directly in the <img> tag.

`src/less`

Here we have all the general LESS files, maybe bits rom other libraries, variables mixing etc.



esting

I will describe the testing process summarily because I still need to start doing it :). Te pragma hereis that or every file that we create, we need a appropriate test, the best approach would be start thisusing est Driven Development, we get an idea o the method/unction, angular controller/directive/service etc we want to make, then FIRS we create a basic test or it and we make the actual JS file intandem with the test file, the benefits are extremely obvious.

In our case, every *.spec.js file is ran through karma which tests the integrity o our code, the code istested in PhantomJS and the results are outputted in the console. IF we are using `grunt watch` thetests will run constantly on file change events and the console will ping i there’s an error in our code.

As a good practice, all the js code is parsed through jslint beore build task, and we get realtime errorsand code hints in the console i our IDE is not set up the same as jslint

Te great thing here is the organization o the files, we create separate less files or every templatewhich will be compiled in one big file or the production environment.

LESS

CODE STRUCTURE - Testing & LESS



Dependency Injection

INSIDE MY DOMAIN

OUTSIDE MY DOMAIN

MongoDB

Firebase DB

MongoLabs

MongoDB as aService

mongoService

firebaselibrary

firebasesimpleLogin

AngularFiremiddleware

firebaseService

storageManagement

storageM.calls

storageM.calls

storageM.calls

facebook

Zoom In

I think the best to describe dependency injection is by exempliying a set o services I did last weekend.As a pragma, AngularJS is build with dependency injection in mind. In our main app.js file we are call-ing the top tier o actory services, services, controllers and directives we need, and rom there on wespeciy urther dependencies in those specific services/controllers.

Back to my example, I have created a ‘middleware’ service, it’s called `storageManagement`, this serviceneeds other services to work, and the logic inside it is exposed through methods to be called upon inour controllers.

As a dependency tree on HOW I connect to MongoDB and Firebase and USE the databases we havethe ollowing diagram:

CODE STRUCTURE - Dependency Injection



tivity’s build environment is handled entirely by grunt. Grunt and its plethora o add ons take care o

the entire process regarding development build, production and testing. Grunt, as stated on their web-site is a task runner, with complementary modules, here, there is a system o tasks that run on everybuild.

Let’s take the build task, it uses the watch module, listening or a file change in a designated directoryand when a file has changed the ollowing tasks are running:

grunt.registerask( ‘build’, [ ‘clean’, ‘html2js’, ‘jshint’, ‘coffeelint’, ‘coffee’, ‘recess:build’, ‘concat:build_css’, ‘copy:build_app_assets’, ‘copy:build_vendor_assets’,

‘copy:build_appjs’, ‘copy:build_vendorjs’, ‘index:build’, ‘karmaconfig’, ‘karma:continuous’ ]);

clean - it cleans the directories where we will copy the compiled results

html2js - it takes all the partials and compiles them to js to reduce network calls and have them all inone place, this does not happen in dev build, only in production build.

jshint - it checks the code or errors

coffeehint - checks existing coffeescripts or errors

coffee- it converts all coffee files to javascript files

recess:build/compile - handles our LESS compilation and uglification automatically, only CSScompilation or build and magnification and uglification or production

concat:build_css - takes all o our reshly converted CSS files and concatenates them into one, alsotakes the vendor specific css libraries, i any (the external ones need path declaration in build.config.js

though)

copy:build_app_assets - copies all the assets to the new location, here we could insert the optimi-zation hunt task

copy:build_vendor_assets - copies all the vendor reerenced libraries in build.config.js, on pro-duction it also compiles everything into one file.

copy:build_appjs - on production it compiles all the files into one, and in development it just copiesthe exact structure to the build older.

copy:build_vendorjs - the same as above, only or vendor javascript

Build Environment.

CODE STRUCTURE - Build Environment



index:build - it adds all the reerences to index.html, also this process is different rom developmentto production

karmaconfig - apply karma configuration

karma:continuous - run all the karma tests

Te above processes run on every file change i we started grunt with the watch parameter and theycomplete in about two seconds.

Deployment Environment.

CODE STRUCTURE - Deployment Environment

Te deployment environment is a NodeJS application serves, with express as a dependency to createall the required server side dependencies.Everything resides in the production older, there I have another git root that is connected to Heroku.

Te application itsel is copied here when we run `grunt compile`, as a result, in the `public` olderwe’ll have the index.html, ONE javascript compiled file containing absolutely everything (app, routes

js, vendor libraries), and the assets older.

A short description:

/node_modules is where the node server dependenciesare, here the essential components - ejs is able to read and parse routes rom html2js tem-plates - express is nodejs templating ramework it offers ea-tures similar to apache, routes, redirects, location, restric-tions, mime types or files, .htaccess like rules etc. - nodemon is a nodejs server monitoring tools, whichrestarts the server on any change. - url offers utilities or URL resolution and parsing

Te rest o the files besides server.js are the same like above,dependency etching scripts.Tere is also a Procfile that will get parsed when pushingeverything to Heroku so it knows what kind o server weare running and runs the appropriate one.



MOBILE

mobile development con-

cept (app-specic)

Tese are general guidelines by which I think a mobile web app should be developed, most o theadvice given here is not used YE in the application, as it is still a work in progress, but I have startedwith these ideas in mind.

I hope I will get to the optimization part while developing this DEMO app, as much as times allowesit, I am really eager to compare perormance given all the subchapters below are applied to the appli-cation development.

HML Optimization

Like I said in the opening bits o this document, a web app cannot be natively ast, even i the userstend to believe this, thereore we need to actually lie to the user, showing him a sense o responsive-ness even i we actually don’t present him the inormation.

For this issue here the development o a web app should be centered around this pragma.

From a technological standpoint this means we have to server something to the user as quickly aspossible, this means:

- asynchronously loading js files so we don’t interrupt the flow o the index loading.- a bit o html and inline CSS that will load within the first second o access on the app- i we don’t have the templates in one file (html2js) buffered serving, a service that runs in the back-ground and etches all the necessities without interrupting application flow.

Te CSS is paramount here, i we have deault CSS then media-query’ed CSS, the first CSS will loadnonetheless and then the media-query will apply the appropriate styles, or this, even the first CSSshould be in another media query that will just be skipped i the conditions aren’t met.

Another option to do this is to run a check first (with some deault inline style or aster loading) orwhich device do we want css and to make a network request or the appropriate file.

Bottom Line: load first some inline css or instant responsiveness, then etch the required CSS file.

CSS Optimization

MOBILE - Optimization



Assets Optimization

JavaScript Optimizations

Angular Optimization

What I talked about beore, asset magnification and sprite-ification, i we have only a ew smallicons, it’s better to load them in the html in base64, to avoid another network request.

Te main concern here is code size and what does the code do, in many cases pure JavaScript writ-ten custom or something leaves a smaller ootprint, does exactly what we need it to do and i builtcorrectly, it runs ast, the lesson here is avoid using libraries rom which you need only two or threeextensions.

Also, keep your interaction with in-browser objects to an absolute minimum, in our case Angular

takes care o that and it would be counter intuitive, and really, bad practice, to use jQuery to manipu-late DOM objects.

Always use CSS animations where possible, JS animations are very costly on the resources.

Tis obviously implies code optimization, there’s a bunch o articles on the matter, no point describ-ing this here, improper unction calls, closures etc.

Angular is wonderul. I’m gonna start with that. But as with any other library i used improperly itcan cause you a lot o headaches.

We have to check the number o $watches, or i possible avoid it entirely (actually i build properly),we can leverage the $digest run that angular does on every action to supplement or $watch.I still have to learn a ew things about optimizing Angular apps really good, but, in retrospective, I

try to keep with the best practices.




Te greatest enemy o a web app is the number o network request, even i we have a good speed, onmobile devices through 3G a network request might take long that even etching the file/asset.

Te base ideas here are:

- serve as little as possible- or at least serve at little as possible at the beginning to give the user a response- compress files- minimize files number- i you are connecting to multiple RESull API’s create an external service that etches all the dataat once rom all your sources

Network Perormance




Github

github workow

- versioning

grunt takes care o the versioning, it’s semantic versioning as need by git and like the most stan-dards on the internet

- github

Nothing to say here

- github issues system

Github has a beautiul issues system, with labels.

Te issues can be closed or updated directly rom the commit message, e.g.: ` git commit -m“Fixes or firebaseService. Close #43” `

tivity presentation

Documents