Some time ago @jvassev pointed me to Yeoman, a great set of tools that really improved my productivity when developing JavaScript apps. One of the tools it wraps is Grunt, it is used to automate common tasks when developing a project, like running a preview of the project, building it and testing it.
I am working on a project, where we are running the "grunt server" task that starts a static server so we can preview and test out changes of the front end code. Together with that it can run livereload that will listen to file changes, so that when a file is changed, the browser is automatically refreshed, or also compass server that will compile all your sass files, and others.
In order to develop in an environment as close as the production environment, you should query your back-end API. This can be done with this neat grunt plugin, that, https://github.com/drewzboto/grunt-connect-proxy . So basically if you run "grunt server" locally, then it can serve you the static files, and request to the back-end API can be proxied to your web server.
You can check this post that explains more.
Tuesday, December 3, 2013
Wednesday, November 27, 2013
Animate ngView transitions in AngularJS
Let me just start this post by saying that AngularJS is awesome! I have been playing with Angular recently and I must say that it has the things I loved in Flex and I missed in JavaScript frameworks. Things like declarative UI, bi-directional binding and a lot more, but now I will not write why Angular is cool.
This post will be covering something that I recently wanted to implement, but it seemed that it not so straight forward - animating ng-views when they change.
An example of such transitions you can check here http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngView#animations . As you can see when you click on a link, the view is changed by making this slick slide animation. One thing that we notice is that the view is sliding only in one direction, but it will be really nice to have it both ways, based on the hierarchy of the views.
In this great post http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/ we can see how we can make the sliding bi-directional, and it is looking much better.
However we also want the app to respond to browser's Back and Forward button, so we have to handle route changes and switch the animation CSS class based on where we were now and where are we going, so we can have this next and previous interaction.
In AngularJS this is easy we just add a route change handler
And having the following set for our view
We have some kind of sliding animation when we switch between views. But there is a "gotcha". When the view is changed, the old view slides to the opposite direction, say "right" and disappears, then the new view slides from the "right" direction, where we expect the old view to slide to the "left" and disappear and the new view to appear and slide from the "right". This is because both the switching of views and assigning of "isDownwards" to the model is done in the same $digest cycle, and therefore the old view, when removed, does not have the new direction class applied, and is animated to the opposite (old) direction.
So in order to fix this we have to switch the views, after the cycle in which the "isDownwards" is applied to the model. AFAIK to invoke something after the current digest cycle you can invoke $timeout and pass 0 for delay. And to delay the view switching, we can pass a resolve map to the route parameter of $routeProvider, and if any of it's dependencies return a promise, Angular will wait until this promise is resolved. So our code for this will look like:
Having all this, we can have an application with views that when switched are animated in a given direction, and this direction is based on the current location, and the location that we are changing to. Of course this sliding animation can be changed with any other animation that makes sense to have forward and backward behavior.
The final example can be seen here:
http://maverix7.appspot.com/files/ngview/index.html
You can right click and view its source or see this gist https://gist.github.com/tgeorgiev/7667648
This post will be covering something that I recently wanted to implement, but it seemed that it not so straight forward - animating ng-views when they change.
An example of such transitions you can check here http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngView#animations . As you can see when you click on a link, the view is changed by making this slick slide animation. One thing that we notice is that the view is sliding only in one direction, but it will be really nice to have it both ways, based on the hierarchy of the views.
In this great post http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/ we can see how we can make the sliding bi-directional, and it is looking much better.
However we also want the app to respond to browser's Back and Forward button, so we have to handle route changes and switch the animation CSS class based on where we were now and where are we going, so we can have this next and previous interaction.
In AngularJS this is easy we just add a route change handler
var oldLocation = '';
$scope.$on('$routeChangeStart', function(angularEvent, next) {
console.log("routeChangeStart");
var isDownwards = true;
if (next && next.$$route) {
var newLocation = next.$$route.originalPath;
if (oldLocation !== newLocation && oldLocation.indexOf(newLocation) !== -1) {
isDownwards = false;
}
oldLocation = newLocation;
}
$scope.isDownwards = isDownwards;
And having the following set for our view
<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}"></div>
We have some kind of sliding animation when we switch between views. But there is a "gotcha". When the view is changed, the old view slides to the opposite direction, say "right" and disappears, then the new view slides from the "right" direction, where we expect the old view to slide to the "left" and disappear and the new view to appear and slide from the "right". This is because both the switching of views and assigning of "isDownwards" to the model is done in the same $digest cycle, and therefore the old view, when removed, does not have the new direction class applied, and is animated to the opposite (old) direction.
So in order to fix this we have to switch the views, after the cycle in which the "isDownwards" is applied to the model. AFAIK to invoke something after the current digest cycle you can invoke $timeout and pass 0 for delay. And to delay the view switching, we can pass a resolve map to the route parameter of $routeProvider, and if any of it's dependencies return a promise, Angular will wait until this promise is resolved. So our code for this will look like:
var resolve = {
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 0, false);
return delay.promise;
}
};
angular.module('viewTransitionApp', ['ngRoute', 'ngAnimate'])
.config(function ($routeProvider) {
$routeProvider
.when('/viewA', {
templateUrl: 'viewA.html',
resolve: resolve
});
});
Having all this, we can have an application with views that when switched are animated in a given direction, and this direction is based on the current location, and the location that we are changing to. Of course this sliding animation can be changed with any other animation that makes sense to have forward and backward behavior.
The final example can be seen here:
http://maverix7.appspot.com/files/ngview/index.html
You can right click and view its source or see this gist https://gist.github.com/tgeorgiev/7667648
Sunday, November 24, 2013
Check 1, 2 ... 1, 2
It's been a long time since I last blogged, and it seems I miss it, so I decided it's time to write a new post and try to start to write more frequently again.
One night we were out for a beer with Serge and he asked my what's going on with my blog and why I am not posting anything and he got me thinking...
Part of my absence in this blog was because I have been busy lately. I took part in lots of new and interesting development projects, I've continued my education for a masters degree, I've been supporting the protests in Bulgaria, I traveled around and around, I even starred in a ski/snowboarding movie ;)
Another reason was that I started playing with JavaScript technologies, both front-end and back-end, things that in the past I tried to avoid, but one cannot afford to ignore them anymore.
Since this blog was more technically oriented, I will keep up this tradition and continue writing about my experiences with different programming technologies. I was a big Flex fan and most of my previous topics were on this theme, but these recent years, HTML, JavaScript and CSS technologies have evolved a lot, and now is a really interesting and challenging time to be doing JavaScript development. So I am really passionate about what can be done with these technologies and I think it will be nice to blog about it. I have few ideas that I think will be interesting to share soon, so stay tuned.
Subscribe to:
Posts (Atom)