Robin Burrer
Hi list,
just wanted to share some thoughts. For the last few weeks I worked on my personal website. I thought I use this project to try out a new approach.
I wanted the site to be interactive and the development process should be fun - so haxe was the only solution for me :-). Furthermore, I wanted to have an app-like character on mobile devices, but on the other hand it should also be recognisable as a website.
And then I wanted to have separated versions for smartphone and desktop/tablet (traditional responsive design seems always like a compromise to me, or is just not fun to develop).
As a CMS I used wordpress - but I actually just created a web service, that provides the text content as html.
As with most of my haxe projects I used MMVC. That allowed me to start with the tablet version. When the tablet version was done, I duplicated my view folder an modified the views and mediators for smartphone.
That was it - the rest of the code remained unchanged. The development process of the smartpone version was really quick.
So in my build.hxml I can now switch between smartphone and desktop version. The good thing about this is, that only code gets compiled, which is actually needed (e.g. there is now desktop code in the smartphone js file and vice versa).
And I still have only one codebase to maintain.
So that’s it - I’m just excited that it all worked as planed. Have a look at the site if you want:
www.burrer.de (there might still be some bugs - I only tested Android on the emulator)
Cheers
Robin
Marc Weber
Marc Weber
Confidant
Can you offer a little more detail on how the CSS matrix transform works? This is the first time I've seen it used and known about it, actually.
Is it tied to a window resize event?
Marcelo Serpa
--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en
---
You received this message because you are subscribed to the Google Groups "Haxe" group.
For more options, visit https://groups.google.com/groups/opt_out.
Marcelo Serpa
underscorediscovery
My only suggestion is spelling/correct name usage iPad vs Ipad <- for example :)
Great stuff.
Robin Burrer
Robin Burrer
Hi Marcelo and Confidant ,
The whole site is basically just one haxe js file(actually two - one for tablet and one for smartphone). As I said, I used mmvc as an architectural framework. I like mmvc because it does not tell you how to build your views.
I don’t use any UI frameworks exempt of iScroll. And actually, I just used iScroll because I wanted to have a quick solution. iScroll performs well but the integration trough the extern class is not really elegant, so I rather create my own component for this as well.
I created a basic set of hybrid touch/non-touch components that are very light-weight and perform well. I either extend them in my view classes or use them through composition. The view mediator pattern allows me to use my views in a very Lego-like way, which is great for experimenting.
The problem I have with most UI frameworks is that most of them are bloated and don’t perform well on mobile. They are like Flex used to be - complex and quick in terms of development - but the performance was always bad - and if you ran into a problem you had to go through 600000 lines of code… Sorry for being so ignorant :-)
I have not tried bootstrap yet. It looks neat, but I think It would not fit in the approach I just described. But I think the choice of a framework always depends on what you want to do.
>> Can you offer a little more detail on how the CSS matrix transform works? This is the first time I've seen it used and known about it, actually.
That’t easy - it’s like a sprite in flash (but my sprite component uses a div tag that holds other sprite components). When you scale the parent all children are scaled as well. You listen for the resize event, scale the parent(sprite) and place it in the center of the screen.
>> what you used for the server side part of the app.
As I mentioned I used Wordpress as a backend, which is really great. I used the “Advanced Custom Fields” plugin, that lets you create custom post typed very quickly. I then created an ajax service that loops through my page and projects entries, and creates untyped php-objects. These are converted to json and provided to my client.
On the client-side I serialise them to strongly typed value-objects and populate my models accordingly. The views are created at runtime on the client side, depending on what data is provided by the backend.
I think creating the Wordpress backend was the quickest part - it only took me a few hours.
Furthermore, I use the slugs that are generated by wordpress to create my query strings, this way I can deep link in my app e.g.: http://burrer.de/?page=projects&project=alles-gute.
Hope this gives some insights :-)
Cheers
Am Sonntag, 26. Januar 2014 09:00:53 UTC+1 schrieb underscorediscovery:
Saar Korren
I suppose it would be good enough as a web-app, but as far as I can see from the content, it seems like an image site was intended. No SEO presents a pretty bad image.
Here's my tip to you, and any other web designer who might be reading this: Go to your website, turn off JavaScript and CSS, and load it. While it should look less flashy, it should still be readable, clean, and you should still be able to reach most text/info pages (If you have Flash games or other fancy features on your website, there's no need for them to be reachable in stripped-down mode). Furthermore, you should be able to navigate it with the keyboard, using Tab, Enter, and the arrow keys.
Robin Burrer
I’m aware of this, but thankfully SEO is not the only thing that matters. I never said that this is the new way of doing things and should be applied to other websites. But I my case SEO can be added quite easily. I can just let WordPress generate these pure HTML sites, I actually already thought about this. Then I also add some JavaScript that automatically deep-links in the js app when the page loads(clients with JavaScript turned off or search engines will obviously ignore this) - done. Again - I’m not saying that this is a solution for everybody - but in my particular case I think that does the trick and search engines should be able to find all content.
flashline
Robin Burrer
flashline
>>I seems for me you have to make the site more really responsive.I see what you mean but most of my favourite (native) apps have a fixed orientation. Similar like paintings that have a fixed orientations as well :-)I wanted to adopt this idea for this microsite.....
Robin Burrer
flashline
Great Stuff,the only bug I noticed is that when you tap on a month header it scrolls up to the very top of the page rather than to the the top of the month container.