What I did at SunGard AS (From March 2014 to February 2015)?
After my successful career journey from PubMatic , SunGard AS provided me a platform to start working on publically available Front-end MV* framework known as “Backbone.Js”, since last couple of years in my past experience I already made my hands dirty in creating customized UI framework using object oriented JavaScript for pubmatic , now it’s time to evaluate and explore my skills for well known open source UI framework available in JavaScript.
SunGard AS just transformed from SunGard IT services which open a door for new business opportunities to grow individually as separate business unit. I got chance to be a part of team where I was involved in revamping existing software products.
Basically this product was designed and maintained by backend developers before, So of-course we can understand the overall front-end engineering concepts was missing, and as a outcome of it, the code quality became poor.
Here we got opportunity to revamp or re-engineering the existing stuff, along with few enhancements in product, I was very happy and excited to start work on it.
We worked with remote teams in US location for taking steps ahead. First challenge was organizing and restructuring the folder structure, and the setting up development environment in simple steps to save configuration efforts. before starting development we plan to integrate backbone with marionette.
“Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications”
Few things need to be pre-install to make local setup working,
- Required.JS
- Bower
- Grunt
- NodeJS
CSS preprocess used for this application is Sass
Setting up the repository
Here is the steps we took to get started
git clone https://github.com/ui/<project_name>.git
Now that we have our new empty repository in our local it’s a good moment to define what do we want git to ignore when pushing our commits. To do so, create a file in the root of the project called “.gitignore” with the following content:
- app/scripts/vendor
- node_modules
- dist
It is too early to explain why we need to ignore changes on those folders, but basically:
- In app/scripts/vendor we will have all those js files for vendors and libraries our project depends on, such as jquery or backbone.
- In node_modules we will have all those js files for tools we will use during the development of our project, such as grunt.
- In dist we will have all those files specifically generated for the production environment, such as the minified versions of our .css and .js files.
Project Directory Structure
/app
/fonts
/images
/scripts
/collections
/controllers
/layouts
/models
/routers
/vendor
/views
/styles
/templates
Note that I put templates inside the app folder, as they aren’t js files.
Finally, we can already create our index.html inside our app folder. Something like:
<!DOCTYPE html>
<html>
<head>
<title>My Demo Project</title>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”description” content=”A simple projects demo”>
<meta name=”viewport” content=”width=device-width”>
</head>
<body>
<!– HTML HERE –>
</body>
</html>
Here most recommended thing is to integrate application using requires.
RequireJS is a module loader we are going to use to take care of the dependencies between the packages we manage with Bower. Let’s install it with:
Now, in the body of our index.html we can now load requirejs with:
Note that in the data-main attribute we have defined which will be the main module of our application, in this case scripts/main.js. Let’s create it!
Go ahead and create a main.js in the scripts folder. Here we need to configure our requirejs defining all the paths to our vendor repositories as well as the dependencies between them.
main.js should look like:
require.config ({
paths: {
‘jquery’: ‘vendor/jquery/dist/jquery’,
‘underscore’: ‘vendor/underscore/underscore’,
‘backbone’: ‘vendor/backbone/backbone’,
},
shim: {
underscore: {
exports: ‘_’
},
backbone: {
exports: ‘Backbone’,
deps: [‘jquery’, ‘underscore’]
}
},
deps: [‘jquery’, ‘underscore’]
});
Now, we can for example say
require([‘backbone’], function(Backbone){…});
and the app will know what the path to backbone will actually be.
Good, we now need something to load to see if this works. Let’s just load our main view. Create an app.jsfile in a new views folder inside scripts. It should look like:
define([‘backbone’], function(Backbone) {
var App = Backbone.View.extend({
initialize: function() {
console.log( ‘Hello world’ );
}
});
return App;
});
Note that because this is a Backbone view we need to make sure we require Backbone in our little module.
Finally, we need to boot our new app view adding:
require([‘views/app’], function(AppView) {
new AppView;
});
to our main.js file. Again, note how we require the view we just created.
Before we try it out, a quick overview:
- index.html loads
- our <script> tag loads requires
- we immediately execute our main module scripts/main.js
- main.js will set up some common paths for us so that we can easily require libs
- we require views/app.js
- app.js requires backbone and creates a dummy view that logs
- Then, once that is fully loaded, we reference it with “AppView” back in the main.js and we create a new AppView.
Let’s see if it works in our browser localhost/<project_name>/app/ if you don’t use any virtual host.
So here we are done with the making instance up.
Project Details :
Title: SunGard UI product development for Advance Recovery Services nextGen product
Organization: SunGard Availability Services, pune
Environment: Putty, Eclipse, JavaScript, jQuery, Ajax, Backbone.js, Bootstrap, HTML5, CSS3, liferay portal.
Duration: 1 year
Synopsis: SunGard provides IT solutions deals with IT infrastructure projects well known for Managed Services provider, Disaster Recovery, Enterprise Cloud and more.
Role & responsibilities: Usability analysis & UI product development.
Projects: 1> Jasper Report using iReport Designer
2> Jasper Report integration with liferay portal
3> Viewpoint, https://sso.mysungardas.com/id/login
4> Recovery Services – product development
Shaikh imran 