discussion of front end tech to use

[chadxz]

Soon we'll be building the front end for frontier, and i was just curious what approach people want to take for building the ui/ux. If we want to build something that feels more like an application than a content site, it may be a good idea to build the frontend using predominately ajax requests with client side rendering of the fetched data. There are a myriad different approaches to doing this. The most naive approach would be to just continue on the path that frontier has at the moment, which is just building the HTML as strings and concatenating everything to be inserted into a div. This can get messy very quickly.

There are a number of frameworks that aim to simplify the process and structure when building a client side JavaScript application. To name a few of the popular ones: Angular, Ember, Backbone, & React. I have used everything except Ember in the past. For this project I would prefer to use React to build the app.

Does anyone else have an opinion on this subject?

[dannagle]

I've not worked with those. My workflow is usually start things off with a Bootstrap template and AJAX calls for JSON data and a lighter engine such as Mustache.js to render responses. I've also used a lot of jQuery UI.

Anyway, I'm fine with React or whatever path you want to go -- except Angular. I'd avoid Angular for any new project since their upcoming version 2.0 is not compatible with 1.x versions.

[chrisbeaman]

If I were to do this myself I'd use a UI-kit like Bootstrap and then write HTML and CSS with media queries for mobile/tablet/desktop (though I like Abbie's idea of starting with mobile-only). I wouldn't go responsive, I'd stick to a hybrid mobile/web app. It sounds like we'd get closer-to-native interactions using React, which I like the sound of. Plus I'd like to learn React, so I'm in favor of giving it a shot. Can we use React with Bootstrap and take advantage of Bootstrap's UI features? Or would we create UI assets separately? I'm happy to make Photoshop mocks post-wireframes if we feel it would help our creative direction. Alternatively, we could build from wireframes, choose colors on the fly, and use something like FontAwesome for imagery.

[dannagle]

Assuming React and Bootstrap are compatible, we could just drop in a pre-made responsive template and have both mobile and desktop support. There are lots of paths.

I'm also OK with learning React. My vote goes with whatever decision @chadxz makes about the front-end tech. The time I have available for this project is about to plummet until June.

[git-madhav]

At the beginning we were thinking to use React or angular. Both are popular and will give good experience for those who don't know yet. I think Facebook user react. May be lets go with react.

[Nedlinin]

I've not had any React experience but would love to get some. I mostly use Knockout these days as I love the relatively simple two way binding it provides while being very un-opinionated on the rest of the way the app is built.

I also know Ember is getting ready to merge their new Glimmer rendering engine which is supposed to bring it up to React-ish speeds while providing more of a framework than just the view layer.

I echo the sentiment of shying from Angular until 2 is more fleshed out. Angular 1 will still be receiving updates for the foreseeable future but I don't like the idea of starting on a project with a tech we know is going to be dropped relatively soon.

[noahm]

Hey, new member here and coworker of Chris. (I'm out of town this coming week but you should be able to meet me on the 27th)

I just had the luxury of spending the past week assessing the viability of some popular JS binding engines for work. It was a really interesting experience getting my first taste of what everyone has been talking about for the past few years, but it left me confused about why the current favorites are as popular they are.

Angular felt like a soupy mess of over-engineering, requiring you to write everything in non-intuitive and specific ways. React seemed like a weird regression to early javascript woes of conflating markup and behavior, asking you to mix business logic with presentation. Ultimately my favorite of the bunch was Knockout, as it stuck to the primary task of creating data bindings in an intuitive way while avoiding re-inventing any other wheels in the process. Is there something I'm missing in my preliminary exposure to these frameworks?

[Nedlinin]

@noahm

I had the same concerns about React. But, popular opinion being that it rocks and a recent article I read made me want to give it another shot. http://firstdoit.com/react-1

[Nedlinin]

I know a lot of people like Mithril as well if anyone has experience with it and can chime in one way or the other.

[noahm]

Already have that one in mind too. Another member on my team took that one to review, so I haven't looked at it personally yet. They had positive things to say about it, so I will probably be going back to review it myself on Monday.

[chadxz]

So far it sounds like people would be okay with React, generally agree that Angular is not the direction we wanna go, and have some slight interest in Mithril.

Mithril looks okay to me. I like the way it feels like pure javascript. However, I'd rather go with something more popular because then we won't have to re-invent the wheel. Common things are already done for you because of the vibrant community. There are already a set of react components for twitter-bootstrap, google material-ui components, and TONS more learning resources and existing components waiting to be used.

There is also the question of whether to use ES6 via babel. If we want to do that, babel supports React/JSX out of the box. We could also use ES6 server-side using babel-node.

Anyway, just throwing that out there. Would be nice to have this "decided" by Wednesday so that we can move forward, but the more discussion we have about it the better, so people have a chance to state their feelings.

[Nedlinin]

While I have zero React experience, I think it's probably the "right" choice for the same basic reasons @chadxz listed above.

ES6 via babel is fantastic. Highly recommended. :+1:

[chrisbeaman]

@chadxz @Nedlinin @noahm @git-madhav @dannagle Let's use React for the front-end. All of the reasons listed above point toward it being a good option for us. Info about it is here: https://facebook.github.io/react/ . You can try it out in JSFiddle: https://jsfiddle.net/reactjs/69z2wepo/ . Here's a demo of a dashboard made with React and Bootstrap: http://rubix23.sketchpixy.com/app/dashboard . Here are some docs on using React with Bootstrap: http://react-bootstrap.github.io/introduction.html

[dannagle]

:+1:

[chadxz]

26 closes this