Ask HN: Good JavaScript single page applications to learn from

Posted by backslash_16 on Wednesday May 06, 2015 @08:33PM
from the ask-hn dept.

I'm trying to get better at writing and understanding single page applications and want that knowledge to be framework agnostic. I've found an interesting book on it but no concrete implementation [2]

I've been searching GitHub and blog posts for any open source actual single page applications (not frameworks, generators, etc..) and have come up with some good resources but nothing that exactly fits my need.

There is a backbone example [1] but that's only a ToDo list. Pretty much all of the stuff I work on is more complex than that (I'm just a jr dev but the example is so contained), so these examples don't give me a good way of checking my work and understanding.

I understand people use ToDo as their demo because it allows for easy cross-comparison but for digging in it really doesn't help much. One object, tracking its few properties, and keeping a list will be maintainable and extensible just because of how small the codebase is.

So if anyone knows of some medium sized to large SPAs on GitHub that would be great. If there aren't any, if anyone wants to collaborate and build one together along with a series of blog posts or text files we throw in the directories along with our reasoning I'm down.

[1] https://github.com/thomasdavis/backbonetutorials [2] http://singlepageappbook.com/

( 8 comments | 9 points | on HN )

Re:Ask HN: Good JavaScript single page applications to learn... by Kortaggio on Wednesday May 06, 2015 @10:19PM (#9502972)

I like the structure of the game 2048 https://github.com/gabrielecirulli/2048 and I think it will be highly instructive for you since it implements the MVC pattern without using a framework, and you want to be framework agnostic. 2048 is simple enough that it's an accessible introduction to software design.

Daniel Janus wrote a great analysis of the source code and architecture; I highly recommend reading it: http://blog.danieljanus.pl/blog/2014/04/02/2048/

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by JohnMunsch on Thursday May 07, 2015 @08:06AM (#9504445)

I'm not going to hold these up as ideal examples of AngularJS apps, but you might find them interesting:

* https://github.com/JohnMunsch/PaperQuik

* https://github.com/JohnMunsch/ClearAndDraw

They're both deployed on the web so you can play with them to see if they're in any way interesting to you. I wrote both of them last year to play with and learn some things and then I open sourced both of them.

Good luck with your learning.

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by backslash_16 on Thursday May 07, 2015 @12:05PM (#9506049)

Thanks, and both are helpful. I was originally going for framework agnostic because I'm still trying to answer some basic questions about JS (below, just for the sake of completeness) but I'm starting to think using AngularJS or EmberJS for an organized start will be good then I can try and generalize what I know.

Kind of like using Rails or ASP.NET MVC to learn MVC then branching out.

Some things I'm looking for examples in code instead of just blog posts are: 1 - When does someone attach a method to an object's prototype vs directly 2 - When do people use object literals vs defining a constructor 3 - How bind and apply are actually used to change the this binding

Thanks again!

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by bkbooth on Wednesday May 06, 2015 @08:46PM (#9502718)

I used this book http://shop.oreilly.com/product/9781782161820.do when learning AngularJS. It's by no means perfect, but it covers doing a lot of things in Angular and building a full SPA in the process. As far as good open-source examples, I'm not sure, but I'll be keeping an eye on this.

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by ianpurton on Thursday May 07, 2015 @05:50AM (#9504000)

Take a look at Copay. https://github.com/bitpay/copay This is a AngularJS bitcoin wallet.

To me the real benefit of an SPA is using your web skills to build a GUI that can then run on different platforms. Take a look at ionic and some of the tutorials there.

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by backslash_16 on Thursday May 07, 2015 @04:21PM (#9508000)

Also really good, thanks.

I agree, I want to learn more about SPAs because I'm working on them but also because I think it forces a good separation of concerns and makes sure whatever you're building can go cross platform easier.

It makes us the first consumers of whatever API we use for the data, kind of like TDD forces us to be the first users of our functions.

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by ryan21030 on Wednesday May 06, 2015 @08:39PM (#9502689)

It may not be exactly what you want but codepen has some really cool and some really advanced JS projects:

http://codepen.io/

[ Parent | on HN ]

Re:Ask HN: Good JavaScript single page applications to learn... by stephenr on Thursday May 07, 2015 @05:53AM (#9504011)

> Good single page Applications

I'm pretty sure that's an oxymoron

[ Parent | on HN ]