8 ms·

The Pixate Project: Bringing CSS to Native Apps

52 points by pcolton 14y ago

heretohelp 14y ago
I already have a frontend engineer considering switching to native iOS and Android apps just so he can get away from CSS. I am not exaggerating, that is 99% the reason for his desire to abandon ship. He complains about CSS daily despite being one of the more knowledgeable people I know about CSS, save for the rare occasion he asks me a question. Why should I react to this project by doing anything other than lighting a molotov cocktail?
- pcolton 14y ago
  ...because if he hates CSS, wait 'till he gets a load of Core Graphics and Core Animation via Objective-C just to animate a custom shape. ;-)
  - ilaksh 14y ago
    I believe that Objective-C is an outdated overly complex syntax. I assume that you are correct in your implication that Core Graphics and Core Animation are overly complex. However, that does not mean that the answer is CSS. You should not need to hand-write code to lay out text on the screen or change a background color. There is a reason that UI builders have been a standard part of desktop development frameworks/environments for many, many years. CSS is the worst thing that ever happened to front end application development.
    - pcolton 14y ago
      We believe that taking something complex and adding a familiar, declarative syntax, while keeping it all 100% native, will appeal to both developers and designers. We believe so because we've asked many of them.
  - randomdata 14y ago
    Animation of custom shapes seems like it would get into <canvas> territory. The canvas drawing API shares many commonalities with CoreGraphics[1], and I assume that CoreGragphics played some part in its design. A web developer should have no trouble transitioning to CoreGraphics (which, I will add, is not an Objective-C framework) in such a case. [1] If you look at the browser-based Javascript implementation of CoreGraphics (http://cappuccino.org/learn/documentation/group__coregraphics.html http://cappuccino.org/learn/documentation/group__coregraphic...), many of the CG functions are just straight-up bridges to the local functions.
- sbarre 14y ago
  Most of the big problems I have with CSS (as a daily user) come from supporting multiple browsers, and dealing with their variable output from the same CSS files. If the CSS syntax is used as a way of declaratively describing styles in a single controlled environment (iOS) then that's not the same thing, and I would think that it should address a lot of the headaches that browser-based CSS currently has? Plus it would (hopefully) allow the use of existing tools like LESS or SASS to provide even more control and re-use in creating the resources that go into building your iOS app.
  - evoxed 14y ago
    I don't see any reason why LESS/SASS wouldn't work, provided they've ported the majority of the actual spec (comparable at least to any browser out there). Since they simply compile your code into longform CSS it doesn't actually leave any footprints.
- evoxed 14y ago
  I have mixed feelings about this... 1) Why in the hell would anyone want more CSS floating around their codespace? Note: This is partially addressed in "Doesn’t CSS Suck for Apps?" 2) If this becomes a thing, does that mean that everyone involved in the actual drafting of the CSS spec will finally get their shit together and treat it the way it deserves? Note: You too, browser vendors. 3) Does this mean native app developers can finally pay me for more than paper storyboards? Because then...
- jenius 14y ago
  I have honestly never heard of anyone not liking CSS before reading this thread, except for maybe people just starting out who don't understand it. I am an experienced front-end developer an agency and I love css when it's enhanced by a dynamic language like sass or stylus. It's quick, powerful, and easy style many elements at once and create beautiful and lightweight custom UI elements. The only thing I don't like is having to work with it cross browser, but that has nothing to do with css as a language. I studied iOS development for a few months, read a 600 page book on it, and tinkered around with it for a while and found myself begging for CSS. Native custom app interfaces seem backwards to me - the difficult of writing core graphics methods for every bevel, rounded corner, gradient etc has a lot of developers just using cut images for everything. Disclaimer, I'm way way more experienced with css than i am with core graphics - just my impressions.
  - randomdata 14y ago
    I often find myself wishing for CSS widgets, so to speak. A reusable component of HTML and CSS that can be inserted without inheriting anything from the parent elements. You can achieve this if you take a lot of care, but it should be a lot easier than it is. But where CSS really falls apart is in layouts. What is just a simple equation in a native application ends up being a myriad of hacks to get things flowing right in CSS. Javascript comes with the missing pieces, but introduces its own set of problems if you try to rely on it. > the difficult of writing core graphics methods for every bevel, rounded corner, gradient etc has a lot of developers just using cut images for everything. On iOS, the QuartzCore framework provides declarative methods for those common style choices (rounded corners, gradients, etc.).
    - skyhook_mockups 14y ago
      The new CSS3 flexible box layout changes all that. It's incredibly rich and designed to obviate the need for clumsy CSS layout hacks. Check it out if you haven't already... it is the missing piece for app-like layouts for the web. The incredibly complex layouts that can be achieved with minimal CSS and no JS is astounding. Pair this with text-overflow and with ~ 50 lines of CSS and some very basic html you can achieve wonders. Not only that but it's usable today. Both webkit and gecko have very close implementations with only minor edge cases, none of which are insurmountable. Not sure about iOS support for the new layout modes.
cletus 14y ago
In Java at least this has been tried before. There was something called the Jaxx Framework [1]. jaxxframework.org now seems to be defunct so I guess it died. Personally I'm unenthused. For one thing, the typical reason to write native apps these days is that it's a mobile app. Certainly on iOS you'd be better off staying on the reservation. There's only 2/3 resolutions to support anyway (plus two orientations for each). Android is of course more varied. For desktop apps, you're getting increasingly specialized software (the rest going to Web apps) and your best bet is still to stick to the native libraries (Cocoa, WPF, etc). [1]: http://weblogs.java.net/blog/enicholas/archive/2006/03/style_swing_com.html http://weblogs.java.net/blog/enicholas/archive/2006/03/style...
- heretohelp 14y ago
  I'm pretty sure Java in general is a good graveyard to check for "what not to do" save for choice libs like NIO, Netty, etc.
erichocean 14y ago
And then there's Blossom[1], which does the opposite: remove CSS from web apps. Blossom lets you build native-quality web apps for mobile browsers without every touching the DOM or CSS -- it's 100% JavaScript. (Full disclosure: I developed Blossom earlier this year.) [1] https://github.com/fohr/blossom https://github.com/fohr/blossom
sprobertson 14y ago
This is awesome. I don't understand why people are hating on CSS (for one, their hatings don't include reasons why); to me it is a beautiful way to separate form from function. Changing that one button from green to blue? Easy enough with or without CSS. Changing that same button in every one of its 163 possible locations? CSS saves lives in these scenarios.
- wvenable 14y ago
  If you have a large code base with lots of UI then CSS becomes very brittle to change. Nest some UI elements that have never been nested before and something will break. One tiny change in one place affects something somewhere else. You have start making exceptions, a duplicate a rule here or maybe an !important there. Eventually you're got nothing but exceptions. Personally, I think the concept of declarative styling is brilliant but the implementation in CSS leaves a lot to be desired. It's far more error-prone than necessary.
- stevenwei 14y ago
  CSS is used for two different things: styling and layout. CSS for styling is great, since you can declare your colors or font sizes or whatever in one place, and easily make changes to them across the board. I don't think many people would dispute that is useful. CSS for layout on the other hand, I've always found to be a massive pain in the ass, full of counter-intuitive weird hacks. (For example: the 243342 approaches to centering elements relative to one another, often requiring hacky nested divs to ensure things work in IE.)
carson 14y ago
I found this interesting when I saw it before. I had thought of something similar after seeing Nimbus Chameleon http://blog.jeffverkoeyen.com/nimbus-chameleon http://blog.jeffverkoeyen.com/nimbus-chameleon The difference for me however was I was just thinking iOS and was wondering if something could be created that utilized the UIAppearance APIs in UIKit http://developer.apple.com/library/ios/#documentation/uikit/reference/UIAppearance_Protocol/Reference/Reference.html http://developer.apple.com/library/ios/#documentation/uikit/... Edit: I realized I ran into something that does almost exactly what I wanted a couple weeks ago on github https://github.com/robertwijas/UISS https://github.com/robertwijas/UISS
gcr 14y ago
GTK 3 uses CSS for user styles and themes too, I think. See https://desktopsummit.org/sites/www.desktopsummit.org/files/Theming%20GTK3%20Widgets%20with%20CSS.pdf https://desktopsummit.org/sites/www.desktopsummit.org/files/... This replaces the old `.gtkrc` system. Those with recent Ubuntu desktops, try it out!
est 14y ago
CSS layout for native apps? I have to hack heights for a vertical center position?
- skyhook_mockups 14y ago
  check out the CSS3 flexible box model... it'll blow your mind :)
  - est 14y ago
    CSS3 is just a standard. Do you have any full CSS3 implementations embeddable in programs? I'd rather invent something new layout engine than using the lame CSS way. For example I want place an box A next the box B on its right at the distance of 50% of the height of the box C on the left.
    - skyhook_mockups 14y ago
      "CSS3 is just a standard." That's a very strange criticism. Would you prefer a proprietary black box to do your layout for you? "Do you have a full CSS3 implementation embeddable in programs" Another strange one. You can embed webkit and gecko in a desktop app. On iOS the recommended way of getting formatted multi-line text is to use a UIWebView (webkit) "I'd rather invent something new layout engine than using the lame CSS way" I'm guessing you've never actually written a layout engine before. They're notoriously hard to get right. "For example I want place an box A next the box B on its right at the distance of 50% of the height of the box C on the left" You could either use a pre-processor (such as LESS) for the placement of Box A, or if its position is a dynamic property then you can set it using JS.
      - est 14y ago
        > Would you prefer a proprietary black box to do your layout for you? How many times have you look into webkit or gecko source code to fix layout problems? If you think a layout engine is complex enough that need to be open sourced, you are doing it wrong. Layouts should be simple and intuitive. Not a cluster fuck of div's and hacks. > You can embed webkit and gecko in a desktop app. Which is basically an html5 app right? > I'm guessing you've never actually written a layout engine before. They're notoriously hard to get right. Yes I have never written anything like that, but I can tell you native app development (Visual Studio, XCode) layouts are much simpler and more powerful. The problem with HTML and CSS is that they are eigher document flow based or absolute position. It's hard to do relative or responsive layouts right. It's easier to do it right in native ways. There are much richer containers, control groups and docking options. > a pre-processor (such as LESS) for the placement of Box A, or if its position is a dynamic property then you can set it using JS. Oh wow, Javascript for layout, right.
zbowling 14y ago
I did this for iOS 2 years ago for a hackathon. http://cssapply.github.com/CSSApply/ http://cssapply.github.com/CSSApply/ It's not entirely done but it's a good start for someone. The video explains it more: http://www.ustream.tv/recorded/16073539/highlight/187549 http://www.ustream.tv/recorded/16073539/highlight/187549
- terhechte 14y ago
  That looks pretty good. I also have a homegrown solution that does something similar but uses a css-like syntax but isn't like css. It's sufficient for my purposes though lacks many of the things your solution has. I'll have a more detailed look at CSSApply, and see if I can add to it :)
zokier 14y ago
Qt supports CSS stylesheets: http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.html http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.htm... Qt has also QML, which gives developing "native" apps bit web feel.
shasty 14y ago
CSS is a ghetto, a hell, and something not worth repeating...ever.
hopeless 14y ago
I find it somewhat suspicious that the original Pixate kickstarter was for ¢200,000 but they cancelled that 6 days prior to the deadline, with only ~$21k raised [1]. Now they're back with a new kickstarter for $25,000 (which they've passed) [2]. This article also raises the same questions [3] This might not be too suspicious except that no where do they address what happened in the first campaign and what has changed since. Why did they need $200,000 a month ago but now only need $25,000? What has changed? As the Dragons Den catchphrase goes, "for that reason, I'm out" [1] http://www.kickstarter.com/projects/2015210423/pixate-beautiful-native-mobile-apps-with-css http://www.kickstarter.com/projects/2015210423/pixate-beauti... [2] http://www.kickstarter.com/projects/pixate/beautiful-native-mobile-apps http://www.kickstarter.com/projects/pixate/beautiful-native-... [3] http://thenextweb.com/insider/2012/08/26/is-pixate-astroturfing-kickstarter/ http://thenextweb.com/insider/2012/08/26/is-pixate-astroturf... Edit: added the links

52 points by pcolton 14y ago

I already have a frontend engineer considering switching to native iOS and Android apps just so he can get away from CSS. I am not exaggerating, that is 99% the reason for his desire to abandon ship. He complains about CSS daily despite being one of the more knowledgeable people I know about CSS, save for the rare occasion he asks me a question. Why should I react to this project by doing anything other than lighting a molotov cocktail?

pcolton 14y ago
...because if he hates CSS, wait 'till he gets a load of Core Graphics and Core Animation via Objective-C just to animate a custom shape. ;-)
- ilaksh 14y ago
  I believe that Objective-C is an outdated overly complex syntax. I assume that you are correct in your implication that Core Graphics and Core Animation are overly complex. However, that does not mean that the answer is CSS. You should not need to hand-write code to lay out text on the screen or change a background color. There is a reason that UI builders have been a standard part of desktop development frameworks/environments for many, many years. CSS is the worst thing that ever happened to front end application development.
  - pcolton 14y ago
    We believe that taking something complex and adding a familiar, declarative syntax, while keeping it all 100% native, will appeal to both developers and designers. We believe so because we've asked many of them.
- randomdata 14y ago
  Animation of custom shapes seems like it would get into <canvas> territory. The canvas drawing API shares many commonalities with CoreGraphics[1], and I assume that CoreGragphics played some part in its design. A web developer should have no trouble transitioning to CoreGraphics (which, I will add, is not an Objective-C framework) in such a case. [1] If you look at the browser-based Javascript implementation of CoreGraphics (http://cappuccino.org/learn/documentation/group__coregraphics.html http://cappuccino.org/learn/documentation/group__coregraphic...), many of the CG functions are just straight-up bridges to the local functions.
sbarre 14y ago
Most of the big problems I have with CSS (as a daily user) come from supporting multiple browsers, and dealing with their variable output from the same CSS files. If the CSS syntax is used as a way of declaratively describing styles in a single controlled environment (iOS) then that's not the same thing, and I would think that it should address a lot of the headaches that browser-based CSS currently has? Plus it would (hopefully) allow the use of existing tools like LESS or SASS to provide even more control and re-use in creating the resources that go into building your iOS app.
- evoxed 14y ago
  I don't see any reason why LESS/SASS wouldn't work, provided they've ported the majority of the actual spec (comparable at least to any browser out there). Since they simply compile your code into longform CSS it doesn't actually leave any footprints.
evoxed 14y ago
I have mixed feelings about this... 1) Why in the hell would anyone want more CSS floating around their codespace? Note: This is partially addressed in "Doesn’t CSS Suck for Apps?" 2) If this becomes a thing, does that mean that everyone involved in the actual drafting of the CSS spec will finally get their shit together and treat it the way it deserves? Note: You too, browser vendors. 3) Does this mean native app developers can finally pay me for more than paper storyboards? Because then...
jenius 14y ago
I have honestly never heard of anyone not liking CSS before reading this thread, except for maybe people just starting out who don't understand it. I am an experienced front-end developer an agency and I love css when it's enhanced by a dynamic language like sass or stylus. It's quick, powerful, and easy style many elements at once and create beautiful and lightweight custom UI elements. The only thing I don't like is having to work with it cross browser, but that has nothing to do with css as a language. I studied iOS development for a few months, read a 600 page book on it, and tinkered around with it for a while and found myself begging for CSS. Native custom app interfaces seem backwards to me - the difficult of writing core graphics methods for every bevel, rounded corner, gradient etc has a lot of developers just using cut images for everything. Disclaimer, I'm way way more experienced with css than i am with core graphics - just my impressions.
- randomdata 14y ago
  I often find myself wishing for CSS widgets, so to speak. A reusable component of HTML and CSS that can be inserted without inheriting anything from the parent elements. You can achieve this if you take a lot of care, but it should be a lot easier than it is. But where CSS really falls apart is in layouts. What is just a simple equation in a native application ends up being a myriad of hacks to get things flowing right in CSS. Javascript comes with the missing pieces, but introduces its own set of problems if you try to rely on it. > the difficult of writing core graphics methods for every bevel, rounded corner, gradient etc has a lot of developers just using cut images for everything. On iOS, the QuartzCore framework provides declarative methods for those common style choices (rounded corners, gradients, etc.).
  - skyhook_mockups 14y ago
    The new CSS3 flexible box layout changes all that. It's incredibly rich and designed to obviate the need for clumsy CSS layout hacks. Check it out if you haven't already... it is the missing piece for app-like layouts for the web. The incredibly complex layouts that can be achieved with minimal CSS and no JS is astounding. Pair this with text-overflow and with ~ 50 lines of CSS and some very basic html you can achieve wonders. Not only that but it's usable today. Both webkit and gecko have very close implementations with only minor edge cases, none of which are insurmountable. Not sure about iOS support for the new layout modes.

cletus 14y ago

In Java at least this has been tried before. There was something called the Jaxx Framework [1]. jaxxframework.org now seems to be defunct so I guess it died. Personally I'm unenthused. For one thing, the typical reason to write native apps these days is that it's a mobile app. Certainly on iOS you'd be better off staying on the reservation. There's only 2/3 resolutions to support anyway (plus two orientations for each). Android is of course more varied. For desktop apps, you're getting increasingly specialized software (the rest going to Web apps) and your best bet is still to stick to the native libraries (Cocoa, WPF, etc). [1]: http://weblogs.java.net/blog/enicholas/archive/2006/03/style_swing_com.html http://weblogs.java.net/blog/enicholas/archive/2006/03/style...

heretohelp 14y ago
I'm pretty sure Java in general is a good graveyard to check for "what not to do" save for choice libs like NIO, Netty, etc.

erichocean 14y ago

And then there's Blossom[1], which does the opposite: remove CSS from web apps. Blossom lets you build native-quality web apps for mobile browsers without every touching the DOM or CSS -- it's 100% JavaScript. (Full disclosure: I developed Blossom earlier this year.) [1] https://github.com/fohr/blossom https://github.com/fohr/blossom

sprobertson 14y ago

This is awesome. I don't understand why people are hating on CSS (for one, their hatings don't include reasons why); to me it is a beautiful way to separate form from function. Changing that one button from green to blue? Easy enough with or without CSS. Changing that same button in every one of its 163 possible locations? CSS saves lives in these scenarios.

wvenable 14y ago
If you have a large code base with lots of UI then CSS becomes very brittle to change. Nest some UI elements that have never been nested before and something will break. One tiny change in one place affects something somewhere else. You have start making exceptions, a duplicate a rule here or maybe an !important there. Eventually you're got nothing but exceptions. Personally, I think the concept of declarative styling is brilliant but the implementation in CSS leaves a lot to be desired. It's far more error-prone than necessary.
stevenwei 14y ago
CSS is used for two different things: styling and layout. CSS for styling is great, since you can declare your colors or font sizes or whatever in one place, and easily make changes to them across the board. I don't think many people would dispute that is useful. CSS for layout on the other hand, I've always found to be a massive pain in the ass, full of counter-intuitive weird hacks. (For example: the 243342 approaches to centering elements relative to one another, often requiring hacky nested divs to ensure things work in IE.)

carson 14y ago

I found this interesting when I saw it before. I had thought of something similar after seeing Nimbus Chameleon http://blog.jeffverkoeyen.com/nimbus-chameleon http://blog.jeffverkoeyen.com/nimbus-chameleon The difference for me however was I was just thinking iOS and was wondering if something could be created that utilized the UIAppearance APIs in UIKit http://developer.apple.com/library/ios/#documentation/uikit/reference/UIAppearance_Protocol/Reference/Reference.html http://developer.apple.com/library/ios/#documentation/uikit/... Edit: I realized I ran into something that does almost exactly what I wanted a couple weeks ago on github https://github.com/robertwijas/UISS https://github.com/robertwijas/UISS

gcr 14y ago

GTK 3 uses CSS for user styles and themes too, I think. See https://desktopsummit.org/sites/www.desktopsummit.org/files/Theming%20GTK3%20Widgets%20with%20CSS.pdf https://desktopsummit.org/sites/www.desktopsummit.org/files/... This replaces the old `.gtkrc` system. Those with recent Ubuntu desktops, try it out!

est 14y ago

CSS layout for native apps? I have to hack heights for a vertical center position?

skyhook_mockups 14y ago
check out the CSS3 flexible box model... it'll blow your mind :)
- est 14y ago
  CSS3 is just a standard. Do you have any full CSS3 implementations embeddable in programs? I'd rather invent something new layout engine than using the lame CSS way. For example I want place an box A next the box B on its right at the distance of 50% of the height of the box C on the left.
  - skyhook_mockups 14y ago
    "CSS3 is just a standard." That's a very strange criticism. Would you prefer a proprietary black box to do your layout for you? "Do you have a full CSS3 implementation embeddable in programs" Another strange one. You can embed webkit and gecko in a desktop app. On iOS the recommended way of getting formatted multi-line text is to use a UIWebView (webkit) "I'd rather invent something new layout engine than using the lame CSS way" I'm guessing you've never actually written a layout engine before. They're notoriously hard to get right. "For example I want place an box A next the box B on its right at the distance of 50% of the height of the box C on the left" You could either use a pre-processor (such as LESS) for the placement of Box A, or if its position is a dynamic property then you can set it using JS.
    - est 14y ago
      > Would you prefer a proprietary black box to do your layout for you? How many times have you look into webkit or gecko source code to fix layout problems? If you think a layout engine is complex enough that need to be open sourced, you are doing it wrong. Layouts should be simple and intuitive. Not a cluster fuck of div's and hacks. > You can embed webkit and gecko in a desktop app. Which is basically an html5 app right? > I'm guessing you've never actually written a layout engine before. They're notoriously hard to get right. Yes I have never written anything like that, but I can tell you native app development (Visual Studio, XCode) layouts are much simpler and more powerful. The problem with HTML and CSS is that they are eigher document flow based or absolute position. It's hard to do relative or responsive layouts right. It's easier to do it right in native ways. There are much richer containers, control groups and docking options. > a pre-processor (such as LESS) for the placement of Box A, or if its position is a dynamic property then you can set it using JS. Oh wow, Javascript for layout, right.

zbowling 14y ago

I did this for iOS 2 years ago for a hackathon. http://cssapply.github.com/CSSApply/ http://cssapply.github.com/CSSApply/ It's not entirely done but it's a good start for someone. The video explains it more: http://www.ustream.tv/recorded/16073539/highlight/187549 http://www.ustream.tv/recorded/16073539/highlight/187549

terhechte 14y ago
That looks pretty good. I also have a homegrown solution that does something similar but uses a css-like syntax but isn't like css. It's sufficient for my purposes though lacks many of the things your solution has. I'll have a more detailed look at CSSApply, and see if I can add to it :)

zokier 14y ago

Qt supports CSS stylesheets: http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.html http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.htm... Qt has also QML, which gives developing "native" apps bit web feel.

shasty 14y ago

CSS is a ghetto, a hell, and something not worth repeating...ever.

hopeless 14y ago

I find it somewhat suspicious that the original Pixate kickstarter was for ¢200,000 but they cancelled that 6 days prior to the deadline, with only ~$21k raised [1]. Now they're back with a new kickstarter for $25,000 (which they've passed) [2]. This article also raises the same questions [3] This might not be too suspicious except that no where do they address what happened in the first campaign and what has changed since. Why did they need $200,000 a month ago but now only need $25,000? What has changed? As the Dragons Den catchphrase goes, "for that reason, I'm out" [1] http://www.kickstarter.com/projects/2015210423/pixate-beautiful-native-mobile-apps-with-css http://www.kickstarter.com/projects/2015210423/pixate-beauti... [2] http://www.kickstarter.com/projects/pixate/beautiful-native-mobile-apps http://www.kickstarter.com/projects/pixate/beautiful-native-... [3] http://thenextweb.com/insider/2012/08/26/is-pixate-astroturfing-kickstarter/ http://thenextweb.com/insider/2012/08/26/is-pixate-astroturf... Edit: added the links