Using AngularJS for a frontend

R_J

I'm a fan of "static" user interfaces. That's why I hate Microsofts politic about the menu in office: every new version changed some parts of the menu. And then they made it even worse with ribbons! I like to click every time at the same place, whenever I want to do the same action.
So my ideal Vanilla theme must have all relevant links with max. two clicks at hand. Current theme does provide that quite well when you look at the discussions. But when you look at the profile, discussions are out of reach. When you write a new message or a new discussion, you are completely lost (at least you have the breadcrumbs, but that is very meager)

And if you manage to design an interface that shows all relevant links with that two-clicks-away-comfort and that navigation never really changes more than highlighting what is selected right now, you wouldn't have to reload that on every page load, right?

So I had spent some time thinking about how nice it would be to have an app like forum experience with some framework like AngularJS. I'd have my static navigation elements, maybe all in div.Head, and so only div.Body must be refreshed. Depending on the modules, it might be even enough to only update div.Content.

My first assumption was that you have to write a complete new interface in order to make something like that work and that's true for sure: angular will need templates with special markup in it. I even spent some minutes thinking about buying some ready made angular admin dashboards and trying to use Vanilla as the backend! While that is a tempting idea (to be honest: I find the idea to have something like that way more attractive than thinking about working on that), I already thought how to implement the navigation I like.
And when thinking about the content, I came to the point where I thought about modules that use events to render their output to the standard functionality. AngularJS needs HTML templates with "static" code, while some (if not most) plugins rely on inserting content dynamically.

By now I think that is a show stopper: if you create an app like interface with AngularJS, it will be also static when it comes to plugins. Vanilla plugins wouldn't be able to extend such a theme.

Has anybody ever heard of something like a pluggable AngularJS interface?
Or can anyone imagine how AngularJS could be used with Vanilla without sacrificing flexibility?

Bleistivt

Basically, you would have to rewrite all the views in angular. Plugins would have to come with angular views.

In theory, it is already possible to write an alternative interface for vanilla by utilizing the json Data()

I guess that might be one of the reasons why Vanilla will use an API-first approach for their next framework, it's easier to decouple data and presentation
http://vanillaforums.org/discussion/comment/216017/#Comment_216017

What could already be done quite easily is "pjaxing" the pages.
Github uses it and it's quite easy to implement, but probably hard to cover all cases, where you wouldn't want it in Vanilla.

https://github.com/defunkt/jquery-pjax

It would also require including all the javascript files on the first pageload.

R_J

@Bleistivt said:
Basically, you would have to rewrite all the views in angular. Plugins would have to come with angular views.

That's where I have not enough knowledge to imagine a possible solution. Just imagine I would be an eager coder and start to create a angular template where I include all events that are fired in the normal theme so that it would be relatively easy to add templates to existing plugins and add them somewhere

Given I have a html structure like that where there is a FireEvent.

<div>
  <h4>something</h4>
  <ul>
    <li>< a href=""></a></li>
    <li>< a href=""></a></li>
    <li>< a href=""></a></li>
    <li>< a href=""></a></li>
    <?php FireEvent AfterSomeList ?>
  </ul>
</div>

Would I have to replace that FireEvent with some javascript like include * from /plugins/*/views/angular/DiscussionController_AfterSomeList.html?

That way I maybe could include some template, but what if the EventAfterSomeList normally has some EventArguments that I want to work with? Or even worse: it contains a reference to a variable that I change in my plugin?

---

Thanks for the pjax link. I have seen something similar before and that started the whole thing in my head: http://sennajs.com/
I even started writing a plugin for that, but that's only one of my hundred unfinished plugins...

hgtonight

AngularJS doesn't require anything specific in terms of how your backend handles extension.

Events being fired from views could pass in any available controllers as event arguments.

I don't quite get the appeal of using AngularJS, so I might be missing something awesome.

Bleistivt

You're right, that is a dead end

If everything is rendered by js, render events would have to be js events as they have nothing to do with the backend then.

x00

AngularJS basically abstracts asymmetric fetching of views and assets. But that has been done for years anyway.

AngularJS would make sense if you are starting from scratch, but you could just as well use jQuery or hand rolled.

It could be used vanilla though.

businessdad

@hgtonight said:
I don't quite get the appeal of using AngularJS, so I might be missing something awesome.

This time I give you a +1. I find Angular quite clunky, it doesn't strike me as a "smooth" framework.

Bleistivt

Using Angular only for templating would be overkill.
If you are using Angular, you also want to use the other features like bidirectional data-binding:
https://docs.angularjs.org/tutorial/step_04

For js templating only, you might as well use handlebars.js

This also has the advantage of being somewhat compatible with mustache templates.

Something I'm definitely going to follow closely:
https://github.com/vanilla/addons/tree/master/plugins/Mustache

R_J

No clue if AngularJS is overkill, "good", "bad", appropriate or anything, but I found the idea appealing to take something like that: http://flatfull.com/themes/angulr/#/app/page/profile as a blueprint and only match a forum inside. Although that is an admin interface, I really like the way it looks.

Bleistivt

You mean kind of like what Kasper has done with the Apptastic theme?

Apart from that, I think the dashboard really could use a style overhaul

plushforums, a commercial fork of vanilla 2.0 have styled it quite nicely by simply removing most of the gradients, borders and text-shadows
https://plushforums.com/dashboard

R_J

Maybe I should take a deeper look at the Apptastic theme again. "NOT a ready-to-use theme" frightens me, because I'm really not good when it comes to designing or even CSS...

Yes, I think a modern default theme, including dashboard, would be a good publicity for Vanilla. I myself often judge software solutions by looking at it. And if it looks old fashioned, I'm tempted to look for the next possible candidate.

Bleistivt

The only thing I really dislike about +Baseline are the Buttons actually.

And the click targets are too small, something I was trying to solve for mobile with my MinusBaseline theme.