Koala Framework 3.6 Branched

Koala Framework 3.6 branch just got created. See the changelog.

Here a short overview what changed since 3.5:

New assets system

The reworked assets system is now included. That means the following new features:
  • Better performance for scss compiling
  • Ext4 support (see the Ext4 Update Plan for details)
  • Modernizr dependencies integrated
  • automatic dependencies for Component.js

Image Crop functionality

The image component now has and advanced crop functionality as you can see on this screenshot. It is a complete redesign of the image component that additionally allows specifying the used region of the image.

Improved Responsiveness

Many components got improved responsive styling:

  • TextImage
  • List_Fade
  • Gallery
  • GoogleMap
  • ...and more
This entry was posted in Koala Framework by Niko Sams

Ext4 Update Plan

Koala Framework currently uses Ext 2.3 which is rather old - very old.

But upgrading to Ext 4 isn't that easy so we now are doing a soft upgrade. The plan is the following:

  1. Implement a new Assets Dependency System that is able to process Ext4 dependencies without manually specifying them (as we did for 2.3) [done]
  2. Implement standards how Ext4 can be used with new techniques: Ext MVC, Ext Models, REST.... [at work]
  3. Port AutoGrid, AutoForm etc to Ext4
  4. Port the whole Kwc including Components to Ext4
Ext 2.3 will still be available the whole time, usage of Ext4 will be opt-in.
All this will give us a smooth upgrade path and we can start creating new cool Ext4 based applications!
This entry was posted in Koala Framework by Niko Sams

KDevelop PHP Performance Improvements

After moving my blog this is now the first post aggregated on planetkde.

It has been quite some time since my last contributions to KDevelop - I got motivated by working colleges who where starting to use other IDEs (phpStorm, eclipse) as they got annoyed by various bugs in KDevelop.

One big thing is performance - when working on larger projects during initial parsing things get laggy and slow. (eg. when opening code completion)
Our use case is koala framework + zend framework which consist of about 6500 php files.

Profiling showed that the main problem is the large number of included file - but luckily the DUChain already has an option to cache that - which I basically just activated.

Benchmarks

Ok, all fine - but what about actual numbers?

This graph shows time needed (in seconds) for initial parsing of ~6500 files. (lower is better)

This graph shows time needed (in seconds) for checking up to date of ~6500 files. (lower is better)

(Time is measured using duchainify, a small cli helper tool for kdevelop for testing parsing)

You'll see that for this use case this cache really brings a large performance boost!

This entry was posted in KDE, KDevelop by Niko Sams

Spammers, Duck You

Since the last post my blog got a looot of comments. More than 100.000. Now that obviously must be spam.

To combat that I implemented a Recaptcha form field and added it to the write comment form - see below.

The good news is also that the performance of the website was just fine!

This entry was posted in Koala Framework by Niko Sams

Why I don't like Twitter Bootstrap

Bootstrap is a really great thing, especially for people like me who don't want (and can) create their own layout for a website. Just use bootstrap and everything has nice default styles.

Other modules like the grid system are very handy to create grid based layouts which greatly help when creating responsive websites.

But, you are doing it wrong!

Why? Take a look at this very basic example:

<div class="clearfix">
    <div class="pull-right">
        <button type="button" class="btn btn-primary btn-lg">Settings</button>
    </div>
</div>

what's wrong about it? You are more-or-less using inline styles! (ok - not technically but semantically) And we all know that inline styles are bad.

Using class="pull-right" is exactly the same as style="float:right".

Ok... but what now?

Html should only contain content with classes describing what the element contains:

<div class="footer">
    <div class="buttons">
        <button type="button" class="settingsButton">Settings</button>
    </div>
</div>

With the help of sass, compass and sassy-buttons you can easily add the required styles: 

@import "compass/utilities/general/clearfix";
@import "sassy-buttons";
 
.footer {
    @import clearfix;
    .buttons {
        float: right;
        button.settingsButton {
            @include sassy-button("flat", 15px, 26px, #ffd71a, #ffaa1a);
        }
    }
}
 

Obviously this will not look like the bootstrap version, it's just an example how simple it is to do complex styling without having to repeat yourself.

Another issue is adding additional styling bootstrap doesn't have classes prepared for.  Basically you'll have to add (semantically correct) classes and end up with a mixture of bootstrap and my second example.

Sass libraries

There are many sass libraries, here a short list of popular ones: 

I don't know of a mixin library that provides mixins similar to bootstrap classes. Maybe someone should create one...

Less

What about Less? Less is similar to Sass, you can also use that one. I personally just prefer Sass.

What do you think? Are my concerns valid?

This entry was posted in Web Development by Niko Sams

Assets Dependencies reworked

I'm currently working on a re-implementation of Assets Loading and Assets Dependency handling in Koala Framework.

Other solutions existing like Assetic, FuelPhp don't support resolving dependencies. Bower which has support for dependencies works on library level - but we need fine graded support so we don't have to include the whole extjs for example.

I'll show some implementation details in this blog post:

Class Structure

Object Structure

[Source Google Doc]

  • Kwf_Assets_Dependency_Package: starting point, contains ProviderList and Dependency_Dependencies
  • Kwf_Assets_ProviderList: contains list of possible Providers, also resolves dependencies by creating the object tree
  • Kwf_Assets_Provider_Abstract: can resolve dependencies by creating Kwf_Assets_Dependency_Abstract by a dependency name
  • Kwf_Assets_Dependency_Abstract: base class for dependencies
  • Kwf_Assets_Dependency_File_Js/Css/Scss/Printcss: class representing a single dependency file
  • Kwf_Assets_Dependency_Dependencies: has child dependencies, creates tree structure with oder Dependencies and File objects

Usage

Typical usage didn't change, see the documentation.

Example how to use a Package directly:

$package = Kwf_Assets_Dependency_Package_Default::getInstance('Frontend');
var_dump($package->getPackageUrls('text/javascript', 'en'));

Performance

The new system is also much faster than the old one:

  • the whole system has been tuned for better performance
  • only a single cache containing the compiled file exists
  • compiled scss files are never cleared on clear-cache (that helps a lot for apps heavily using scss)

Future Plans

With the new system adding new features can be done easily:

  • Ext4 Provider which automatically resolves dependencies based on annotations in Ext4 source code
  • Modernizr support for thru dependencies
  • Sourcemaps support for compiled files
  • Load Package on demand only when required
This entry was posted in Koala Framework by Niko Sams

Koala Framework 3.5 Branched

Koala Framework 3.5 branch just got created. See the changelog.

Not much changed till 3.4, but here a short overview:

Subfolder

Finally you can run now a kwf app in a subfolder. This makes installing simpler as you don't require an own domain for your app.
As this is a new feature it doesn't work perfectly yet, expect a few glitches.


Performance

Further performance improvements have been made for servers that don't provide a memcache daemon where we have to fall back to caching in filesystem.


This entry was posted in Koala Framework by Niko Sams

Koala Framework 3.4 Branched

Koala Framework 3.4 branch got created yesterday. See the changelog.

Here a short overview of the highlights about what's new in this version.

Performance

Various performance improvements have been implemented to speed up frontend and backend:

  • Acl Cache: The Acl object needs to be loaded for every Ajax request being done to check permissions. Loading this Acl can be relatively expensive if it exists out of many resources. Especially if those resources are generated out of the component tree.
    The whole acl object gets now cached in memory.
  • fullPage Cache: Every component has it's own entry in the view cache. When loading a page all those tiny parts are connected together - which can be 300+ parts.
    The fullPage Cache now creates a big cache for the whole page - excluding any dynamic areas.

Themes

Koala Framework now supports Themes. Currently two Themes are shipped with Koala:

Web Installer

Koala Framework now can be setup/installed using a web based installer:

Security

security improvements have been implemented:

  • Full https support in frontend: automatically redirect to https when a form or a login is shown. And automatically redirect back to http to avoid performance problems
  • CSRF protection: all ajax requests are now secured by a unique token
This entry was posted in Koala Framework by Niko Sams

First Blog Post

Welcome to my new blog which is a successor to my old one: nikosams.blogspot.com.

This Blog has two goals:

  1. I'd like to post about development of projects I'm involved in (mainly Koala Framework, probably also some KDevelop)
  2. Test running a Koala Framework based Blog on a cheap mass hoster (godaddy in this case, €2.39/month)
This entry was posted in Koala Framework by Niko Sams