SPA recommendations

General Prog (Archived)
1

Hello ヽ(・∀・)ﾉ

I’m looking for some recommendations to choose a SPA framework for my personal project (medium size), I’m looking for a solution that mainly has:

  • GraphQL support (That includes having support to subscriptions [Absinthe is finally close to implement it \(￣▽￣)/ ])
  • Easy to handle user authentication with phoenix (in general good integration with phoenix, but with GraphQL(Absinthe( support I think is enought)
  • Good SSR (Server side rendering) implementation

My main problem:

  • I don’t feel comfortable coding javascript, is too messy for me, and errors messages are pretty confusing or nonexistent (Is what I think when I code it, I’m not saying that is bad language etc… I simply don’t like it at all)

What I have tried:

VueJs:

I found it when I was working on a little project with the laravel framework, it was a moderately pleasant experience (for this project), so I had decided to use it for this project

My problems with this:

  • SSR: As I know Vuejs is pretty young, the only library that support it is nuxtjs, but still waiting for the “upcoming 1.0 release” for a looong time
  • Still javascript, messy sintax, poor errors logs and so…

Angular 2:

I check this cause my C# experience, it uses typescript that looks like too much as C# and feels pretty robust but… was too much work do achieve something compared to VueJS, very very stepper learning curve, so I dropped it

PD: It was when Angular 2 had not been totally released, I don’t know the actual state of Angular

Elm:

I know Elixir thanks to Elm, it feels like the solution to all my problems, a functional language with an amazing error log and very friendly with the developer, but I have to recognize things that I have some problems:

  • The way to declare a static type on a function (I do not know if this is the correct way to express it on english) can be confusing compared with another strong typed like C#
echoServer : String {-- Uh thats easy --}

update : Msg -> Model -> (Model, Cmd Msg) {-- Now looks a bit confusing... And gets worse if you have more parameters --}
  • Not a lot of libraries, and more important without any fully functional GraphQL library
  • SSR not implemented (also I don’t see a way to work with things like the page metadata) [Seems like 0.19 will solve it and also make easier the SPA development, but not sure about it]
  • I still without know how correctly handle CSS with it oO

So thats it, my background, I do not know if I give up and use any javascript framework, or use Elm. But anyway I would like some recommendation to choose a good library/framework (or get comfortable with JS…), libraries to try, languages to learn etc… ^^’

Thanks :smiley:

Greetings and hope can help me (๑˃ᴗ˂)ﻭ

PD: Feel free to tell me or edit if there is any grammatical error, I still learning English ^^

2 Likes
2

So, I always just use something like React which is a lot like Vue because I prefer to create components inside pages and don’t care about SSR. So take everything else I say with that in mind.

Yeah, that’s a pretty big problem. The only thing I can think of is to use TypeScript. Like you said, it looks a lot like C# because Microsoft built it for IntelliSense support. But it also has some extra debugging tools that work with Visual Studio Editors.

This is another hard one. I think that there are a lot of ways to do this now, but I don’t know. Whenever someone needs something like this, I always suggest that they just used server side pages. But I’m pretty sure that the full frameworks like Angular and Ember probably have an easier job at this.

I’m guessing the problem you had with Angular was where to start. Since none of the tools you would be expected to use in an actual project are included it can be confusing for new comers. So, I would say try Ember. Ember has a lot more opinions, which means there are a lot more decisions made for you.

Plus I hear Ember’s SSR library FastBoot is pretty amazing. I don’t know though.

2 Likes
3

In case you didn’t see, it’s actually out in the 1.4.0-beta.1!

EDIT: We use React with Apollo and it’s been a pretty good experience. I can’t speak to it extensively as I don’t do a lot of front end stuff.

4 Likes
4

I do advise to reconsider the point of view here. While JS is known for the many flows it has such as:

  • absent of the clean design plan from the day 0
  • trying to catch up with other languages by adopting everything that is within the current reach
  • confusing behavior where exceptions from the rules become so huge that they have their own exceptions

it can do amazing things considering latest advancements: service workers, fetch, etc. And you or any other person on your team will still have to deal with it when it will come down to optimizations and making site responsive.

Look at it following way: you are already spending time doing research, give Read JavaScript Allongé, the "Six" Edition | Leanpub a chance instead and then just pick the right tool for the job.

And none of the Vue, Angular (and React) for that matter is a real framework. Although Angular is marked as the framework on the title, later on the site they say:

AngularJS is a toolset for building the framework most suited to your application development.

Framework put a clear borders on what and how is it possible to do and developers who are going against that way will be punished tremendously, thus framework limitations are often hard to overcome but in the same time it will empower to do things it really shines for.

To sum up I would say that SPA are made for the desktop-alike apps, i.e. such where user spend most of his working time and building one should be considered with care because it also brings maintenance complexity along the way.

2 Likes
5

Thanks for taking the time to answer ^^

I haven’t tested React, I will give it a try looks like many people use it, also I just take a little look to typescript and React and looks like normally they use Flow instead of typescript

Yeah I’m not saying that is a bad language, I know is strong on many aspects ^^

I already checked a few tutorials (that I always drop after some time hahahaha), the one I found most interesting was this GitHub - getify/You-Dont-Know-JS: A book series on JavaScript. @YDKJS on twitter. but dropped it after “this & object prototypes”, also I check your link pretty fast just looking the code, I specially don’t like things like this:

((PI) =>
  ((PI) =>
    (diameter) => diameter * PI
  )(3.14159265)
)(3)(2)

functions inside of functions of other functions of functions and so on, but I’ll give it a try and read it completely, thanks ^^

Thats exactly what I like ^^, spa feels smooth and have good benefits on things like load one time css and js and so on…

I will take a look, seems interesting thanks :smiley:

PD: I have never worked much on frontend development, I’m a backend guy, this is my first personal big project, just me is working on it, so that’s why I want to choose a good option ^^

I hope there are more opinions and recommendations from other users, again thanks guys to take the time to answer ^^

6

@WolfDan I just published a APWv0.6.0 which fully supports Absinthe subscriptions (you’d need to use absinthe’s subscription branch). I implemented a demo app for it Verily which uses React, an Apollo client on the front and Absinthe GQL on the backend. The app is just a demo and I made it for testing both Absinthe subscriptions and adding support for it on APW, but I guess maybe it could be of interest to you at least to get a look at the code.

2 Likes
7

I’d throw in another recommendation for ember, its a great framework with a lot included out of the box to make getting up and running easier. It also doesn’t require you to pull in as many packages and get them to play nicely together in order to make a working SPA framework as angular or react does.

#####Language
You can also avoid using JS mostly through using ember-cli-typescript or ember-elm. This would allow you to use your language of choice where you want and still have a lot of interplay with all the libraries provided by the elm-ecosystem.

#####GraphQL
While ember has a built in store with ember-data you can add an adapter for graphql (ember-graphql-adtaper).

#####SSR
On the SSR side of things ember-fastboot just got to 1.0.0 :tada: :tada: :tada: . I’ve been using it for a side project for the last few months and so far its gone really well. The only change I’ve really had to make (bar vetting packages for fastboot support) is using ember-fetch for any not ember-data related queries.

####Authentication
As for authentication I’ve used ember-simple-auth with phoenix (1.2 & 1.3 apps) using guardian. Its awesome, that is all. But seriously its super easy to setup on the ember side, provides a few nice helpers through the session and is really easy to hook into. In work I’ve had to do a lot of complicated state management around user auth and having to restrict/unload user data given certain events. Ember simple auth made the auth part of that seamless … managing my own state was the hard part :sweat_smile:

2 Likes
8

Oh man it looks pretty cool!!!,

I’m really interested on the ember-elm, but seems like the project don’t have activity a lot of time ago, also there is not a lot of examples to know how to use it :p, do you know any good example of use?

Everything else looks simply amazing, I’m really considering to use ember if Elm package works well :smiley:

Thank you

@vic thanks for share! :smiley: I’ll take a look to the Verily project :smiley:

PD: I also tried to figure out make Elm work with the React package for Graphql but I didn’t get it work ;-;

1 Like
9

Not aware of anyone using it for anything serious but there is a small demo I found on github here. Your right on the lack of dev recently but looking at it I think its more it just works as advertised at the moment.

Embers ecosystem is full of high quality stuff that just works well together, its one of the things I love most about it. Since the framework is so consistent and stuff breaks so very very rarely its easier for addon authors to build new stuff and maintain it. There’s even some elixir goodies provided now with the likes of ember-changeset and ember-changeset-cp-validations. Highly recommended if your doing work with forms and form validations :slight_smile:

1 Like
10

You could easily do a Phoenix-driven SPA by using something like the Drab library too.

3 Likes
11
  • Reason / bucklescript
2 Likes
12

I’m liking Reason/Bucklescript with React

1 Like
13

Oh do you have any exaple to achieve it? :smiley:

@mkunikow So many thanks! looks really interesting :smiley:

14

Can just look at the Drab code, it is pretty simple in how it works. :slight_smile:

I’m hoping to get a component’ish style setup into Drab built-in at some point, would make it even easier then. :slight_smile:

1 Like
15

A bit old post, after a long vacation I return to my project, I decided to test Elm (0.19 looks promising) and did an integration of Elm with ApolloJS through Ports in case anyone is interested in it

is fairly simple but works well

16

Hey I’m a bit late but should definitely check out Aurelia, most enjoyable SPA I’ve ever worked with