Cool Single Page Apps and advice on creating them

help

I'm looking for opinions and advice on creating a single page app. I'm currently thinking of using Backbone.js but I've got a while before I have to make a decision. If anyone has made a single page app It would be cool if you give a demo link and/or some insights. Again any advice would be helpful. I want to make the right decision for my job and my team.

Posted Dec 28, 2016, 4:57 PM UTC

39
leeoniya•

It really depends on your needs.

Different patterns make sense to different people. If you want to simply get the benefits of virtual dom and move away from things like jQuery and direct dom querying/manip, you may be quite comfortable with a fast vdom view layer and handle the rest of the architecture yourself. Many vdom libs use hyperscript and don't need any tooling setup or compilation steps. They are also very fast to pick up and understand. Mithril, Dio, vidom, snabbdom, domvm [1] are examples. If you want to benefit from large ecosystems and just use ready-made components, then the big frameworks are better, though typically require more learning, tooling, etc.

Look around, see what clicks.

[1] https://github.com/leeoniya/domvm (disclaimer: my own)

1
ldashandroidOP•

Yep I've been researching for about 2 weeks so not really looking for "the answer" just looking for pitfalls or success stories of single page apps you've worked on.

1
leeoniya•

The SPAs I usually work on are internal back-office type stuff and manufacturing interfaces, so it's not something that can be made public. However, if you're looking for something a bit more fleshed out than Hello World, you can look through /demos [1], particularly ThreaditJS [2] which is an implementation of [3] that forces app implementations to handle routing, error responses, network timeouts, slow replys, throttling, etc.

It's rather difficult to evaluate frameworks without dedicating at least some time to implementing a widget of some sort. For me, React seemed like a no brainer (hype and all) until I ran into its performance implications and the officially sanctioned workarounds that were "par for the course". It didn't impress me, though I do understand its philosophy and the trade-offs it brings to the table. Mithril and domchanger were much closer, but still either had performance issues or surprising gotchas. In the end I wrote domvm which was a mix of Mithril and domchanger with the performance and API for the type of code I wanted to write.

The hype train moves too fast for me :/ I'm quite content with letting the dust settle in 1 year cycles to see what survives.

I just recently moved to a Rollup -> Buble -> GCC dev cycle from a basic IIFE -> concat > minify cycle. Typescript might be next :)

[1] https://github.com/leeoniya/domvm/tree/2.x-dev/demos

[2] http://cdn.rawgit.com/leeoniya/domvm/2.x-dev/demos/ThreaditJS/index.html

[3] http://threaditjs.com/

1
memystic•

This was me a few months ago. I went with React + Meteor and couldn't be happier. Do this short tutorial and see if it's your thing. Very, very powerful combination.

1
Imallic•

There are tons of choices out there. But the two big ones are Angular and React. I personally prefer Angular but I'm going to try and keep this objective.

Angular was made by Google and React was made by Facebook. So they're both quite reputable companies to grab a library from.

Here is an article more biased towards React: https://www.codementor.io/reactjs/tutorial/react-vs-angularjs

But in my opinion I prefer Angular. The main reason people dislike Angular though is because of the deep learning curve. It's easy to make mistakes as a beginner. But I feel as I've gotten more used to it, it's helped me out immensely. I can build large scalable apps with absolute ease. But really you just have to jump into it yourself, any option can be made to work for you and your team.

-1
ldashandroidOP•

Yeah I've looked at the docs and tutorials for both but really don't want to have a team of 5 developers learn Typescript or JSX for what would hopefully be a 5 month project. Do you have any examples of what you done?

1
Imallic•

Angular 1.X doesn't require TypeScript and is very powerful.

As for my example project: https://www.collaborate.center

Made by a small team of 3 people.

1
ldashandroidOP•

Cool checking out angular 1 now. Thanks.

1
[deleted]•

[deleted]

1
tme321•

There's so little "learning" in typescript as to be meaningless. It's literally a superset of js. Every single line of valid js is valid ts. The only things you add are types after a :. So instead of

var x;
//sometime later
x = 5;

You just do:

var x: Number;
// sometime later
x = 5;

And due to type inference if you are assigning immediately you don't even have to specify a type, it will know that it's a Number:

var x = 5;

Further, the config for typescript, tsconfig.json, is very simple. Set one up in the base directory of the typescript code and just run tsc from the command line. It will automatically build the entire sub directory tree and spit out the js. That's all there is to it. It really couldn't be easier.

And since typescript does transpiling anyway you can use es6 features like the spread operator and in the tsconfig just specify the output as es5 and you don't have to worry about browser support.

I have yet to see any real downside to typescript.

1
[deleted]•

[deleted]

1