Skip to main content

Web Developer @ MAJ Digital

Contact me at hey@peterbouda.eu

www.majdigital.ch

twitter.com/legocoder

linkedin.com/in/peterbouda

github.com/pbouda

Peter Bouda

Peter Bouda

Migration einer App von Angular 1 nach Angular 2 #angularjs #javascript

3 min read

Vor zwei Wochen habe ich in Lissabon einen Vortrag über die Migration von Angular 1 nach Angular 2 gehalten. Dazu habe ich eine kleine App portiert, die ich vor einiger Zeit schon als Fingerübung als Grundgerüst einer Angular-App in purer ES6-Syntax entwickelt habe. Das Hauptziel war eben jener Minimalismus, also ein möglichst kleiner gulp-Prozess und möglichst wenige Laufzeitabhängigkeiten. Diese App findet ihr hier:

https://github.com/pbouda/angular-es6-boilerplate

Die App ist ein kleiner RSS-Feedreader, der aber letztendlich gar kein RSS lädt sondern schon eine geparste JSON-Version... Also ein JSON-Feedreader :-)

Der Angular-2-Port war dann die nächste Herausforderung, weil ich weiterhin bei ES6 bleiben und nicht noch TypeScript zum Projekt hinzufügen wollte. Letztendlich blieb es dann auch bei kleineren Änderungen für die ersten Schritte hin zu Angular 2, wobei die Nachforschung teilweise doch zeitintensiv war, weil viele der Online-Tutorials eben auf TyeScript setzen.

Die ersten Schritte bei der Portierung werden am Besten im Vergleich der Branches des git-Repositories sichtbar. Hier nur ein schneller Überblick, mehr Details werde ich dann in kommenden Posts veröffentlichen.

Als Erstes habe ich einfach alle Angular-2-Abhängigkeiten zum Projekt hinzugefügt, und die App per UpgradeAdapter initialisiert:

https://github.com/pbouda/angular-es6-boilerplate/compare/master...step1/addangular2

Im Zweiten Schritt habe ich dann die Komponente RssFeedListComponent nach Angular 2 portiert und das entsprechende Template angepasst. Da Angular 2 bestimmte Syntax-Features kommender JavaScript- bzw. eben derzeitiger TypeScript-Versionen benutzt (wie Dekatoren), musste ich außerdem das preset anguar2 zu meinen babelify-Setup hinzufügen:

https://github.com/pbouda/angular-es6-boilerplate/compare/step1/addangular2...step2/upgradecomponent

Dabei habe ich auch jshint erst einmal entfernt, um die Sache nicht zu verkomplizieren. Alternativ hätte ich auch die Dekoratoren u.a. für jshint ausklammern können. Ich plane aber dann in Zukunft eslint zu benutzen, da es sich besser an den eigenen Stil anpassen lässt.

Als besondere Stolperstelle erwies sich die "Rückportierung" der Komponente von component nach directive. Der ansonsten sehr nützliche Angular-2-Upgrade-Guide empfiehlt zunächst, möglichst alle Direktiven in component-Aufrufe umzuwandeln. Jedoch lassen sich diese dann nicht per upgradeAdapter.downgradeNg2Component füttern, diese Downgrades basieren weiterhin auf Direktiven. Allein damit habe ich einige Stunden verbracht, bis ich herausgefunden haben, warum meine Komponente partout nicht funktionieren wollte...

Am Ende lief die App dann aber als Hybrid-Applikation sowohl mit Angular 1 als auch Angular 2, und wenn man die Problemstellen kennt bleiben die Anpassungsarbeiten bei einer solch kleinen App auch im Rahmen. Ich werde demnächst die Portierung einer Produktivanwendung in Angriff nehmen, dann werde ich sicher weitere Erkenntnisse gewinnen und euch hier mitteilen.

Peter Bouda

Making an Angular UI Bootstrap accordion scrolling to top when opening #angularjs

2 min read

I am using the UI Bootstrap Angular directives, specifically the accordion directive, within one of our projects at MAJ Digital. Now I was looking for a way to scroll to the top of the accordion content, when it is too large to fit on a screen. By default, the directive will be opened at the middle of the content, so the user does not see the top and bottom of the panel. A compact solution requires jQuery, for example in a directive like the following:

( function() {
    'use strict';

    /**
     * Makes the `uib-accordion-group` element scroll to top on the
     * `shown.bs.collapse` event. We use it in bootstrap accordions, when the
     * user opens one of the accordion items this directive will scroll the
     * item to the top of the screen.
     */
    angular.module( 'app.shared' )
    .directive( 'scrollTop', scrollTop );

    function scrollTop() {
        return {
            restrict: 'A',
            link: link
        };
    }

    function link( scope, element ) {
        scope.collapsing = false;
        var jqElement = $( element) ;
        scope.$watch( function() {
            return jqElement.find( '.panel-collapse' ).hasClass( 'collapsing' );
        }, function( status ) {
            if ( scope.collapsing && !status ) {
                if ( jqElement.hasClass( 'panel-open' ) ) {
                    $( 'html,body' ).animate({
                        scrollTop: jqElement.offset().top - 20
                    }, 500 );
                }
            }
            scope.collapsing = status;
        } );
    }

} )();

You can then use the scroll-top directive on the uib-accordion-group, just like this:

<uib-accordion-group is-open="status.openPanel" scroll-top>
...
</uib-accordion-group>

Peter Bouda

Talk about Angular at AngularJS Portugal #lisbon #angularjs

1 min read

Angular logo

Next week I will be giving a talk at the AngularJS Portugal Meetup, about porting an app from Angular 1 to Angular 2. Hope to meet you there!

http://www.meetup.com/AngularJS-Portugal/events/230723687/

Peter Bouda

Peter Bouda

The current state of #Javascript ecosystem

2 min read

There is currently a lot of talk about the problems of the current JavaScript ecosystem, only sometimes there are also solutions mentioned. In general it seems there is a consensus that tooling, libraries and frameworks are changing very rapidly and it's hard to keep track with the changes and choose a future-proof solution for your next project. Here are two links with a good summary of the situation:

Javascript Fatigue

The Deep Roots of Javascript Fatigue

When you read the first post carefully I think it mentions one of the sources of the problem: that there was not much going on for a while. The situation was kind of stuck due to problems in the specification process, so now everybody is trying to catch up. And of course it is kind of a trend in general to always choose the latest technology whether you really know it makes sense or not. You do an online search for the best JS framework and then go with React, so React will get popular. That creates a snowball effect on its own. But the posts also have an outlook that is often mention: 2016 will be the year of consolidation, so in a few month we will have a better picture. I agree to that. Whatever happens, things will stay interesting!

Peter Bouda

Peter Bouda

Peter Bouda

Peter Bouda

We proudly present: The IndieHosters Freedom Bundles https://blog.indie.host/2016/we-proudly-present-the-indiehosters-freedom-bundles