I'm trying to choose a library for client-side MVC in ClojureScript. Here's are the ClojureScript libraries I've found so far:
WebFUI (https://github.com/drcode/webfui)
Enfocus: (http://ckirkendall.github.io/enfocus-site/)
Pedestal (http://pedestal.io)
Ducttape (https://github.com/hozumi/ducttape.cljs)
C2 (http://keminglabs.com/c2/) It seems this can be used as a DOM framework.
How should I choose between them? Also, how will they compare to using AngularJS or Backbone from ClojureScript?
This is not exactly a complete framework, maybe just the V of the client side MVC but it worth to keep an eye of it.
https://github.com/swannodette/om
A ClojureScript interface to Facebook's React
Om allows users to represent their UIs simply as EDN. Because ClojureScript data is immutable data, Om can always rapidly re-render the UI from the root. Thus Om UIs are out of the box snapshotable and undoable and these operations have no implementation complexity and little overhead.
Please don't miss this read http://swannodette.github.io/2013/12/31/time-travel/
Ganelon (which I am author of) is a Clojure web microframework built on top of Ring/Compojure.
It is not exactly client-side MVC, as in general it provides a simple mechanism, that allows us to:
invoke XHR request from a thin JavaScript layer (e.g. on link click or form submit)
return JSON response containing operations to be performed (e.g. update DIV, display modal, etc.)
perform operations from step 2 through a thin JavaScript layer
Docs & demo are available here: http://ganelon.tomeklipski.com.
I am the author of Coils, another Client Side Clojure framework:
https://github.com/zubairq/coils
Related
This is more of question of if it makes sense to use Reactjs in my instance. I have an application that generates html serverside. I can not use any js based templating solutions serverside, it is a java/jsp solution blackbox.
Since the markup is already defined I am weary of using JSX to duplicate all the template logic currently only on the serverside. What is typically the best approach to integrating reactjs in to an application like this.
What will be the real advantage to using reactjs for me in this situation. Most of may app will continue to be rendered serverside go forward.
Obviously React is not designed to be used like this; but you could still do it.
Long story short: If you want to build something more complex in front-end you should do it; if you only want to get advantage of JSX templating instead of jsp, it's just a big overhead.
Advantages:
You will be able to step away from standard jQuery approach of handling javascript in .jsp.
You will get all the benefit of a client-side framework, so you are able to handle more complex scenarios in front-end as you would do with standard javascript.
You could hide some business logic in the java side (servlets) and making it available to React world.
Disadvantages:
Probably it's a pain to prepare the development environment mode (webpack, hot-reload, etc.); e.g. you'll need to recompile the jsp on the fly on every js change.
You can't use client-side routing (so you'll have like one SPA per page).
Probably it's really hard to make server side rendering work (for the React part)
Learning a little React currently. I'm finding myself confused about some of the utility here. One sticking point that seems to (for me, at least) undermine it's value is that If I want to sync my UI to data residing on the server (which can and will change), I need to manually poll the server? Aside from component-based architecture, I'm not sure how this is getting me further than well structured and logically implemented AJAX. Even in the React docs, they're using JQuery in this regard. https://facebook.github.io/react/docs/tutorial.html#updating-state
I'm sure I'm missing the forest for the trees or whatever.
Thanks!
React is (citing their page)
a javascript library for building user interfaces
The main focus is to build a view layer for your application. This means you have full freedom in choosing what to use to fetch your data. For simple uses it can be jQuery or fetch.
It's generally recommended to not fetch data directly in your components and use one of Flux pattern implementations, e.g. Redux.
If your application has to be constantly powered by new data from server you can think about using something like RethinkDB on your backend and connect it to Flux store on your frontend.
what are the advantages of using 2 MVC architectures(frontend and backend) in same project. AngularJS and Spring MVC.
Without using AngularJs, can I update single div data without loading the entire page? Is AngularJS responsible for updating single <div> data out of multiple <div>s without loading entire page? If so, please explain in detail.
Once you have a single-page application you have to make sure all the different parts of that application are consistent, that's what the MVC/MV-Whatever in the front end is doing for you. That's not an issue in an old-school web application because the relevant state is regenerated with each request, but once the updates are coming in bits and pieces then different pieces of the front end need to be coming from the same model and that model needs to get updated consistently.
Obviously you can implement div updates with raw JavaScript, you don't need frameworks just to do AJAX. The JavaScript frameworks are written in JavaScript, after all. The frameworks and libraries do make things easier by doing things like papering over browser inconsistencies and providing convenient and useful features (like databinding in Angular).
The server-side MVC does become less complex and involved than it was in the old-school web application, you have less POST-Redirect-GET going on, the front end is more in control about what it is asking for. The front-end application is decoupled much more from the server-side because that whole server-side view layer of JSPs or Facelets or whatever is greatly reduced or just missing, instead you have services supplying JSON over HTTP and there is a much more limited, well-defined contract.
You can update a single element of your page without using AngularJS. As an alternative, for example, you can use JQuery.
You should wonder for the best approach for your project. This answer explains very well the differences between this two approaches.
As an aside note, AngularJS is not exactly a MVC architecture. Instead, the community has decided to call it MVW (Model View Whatever). Check this source for more details.
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.
I am currently using the Backbone philosophy which involves dust.js for template style. Recently I came across AngularJS, which extends the HTML syntax with custom elements and attributes.
Cons of Backbone+dust.js environment:
Upgrading components is time consuming.
Module specification and identification is not easy.
If I move my functionality to AngularJS will it be helpful or does it feel the same?
Can anyone explain to me what the major differences among these two libs are, as they seem similar to some extent?
dust.js is purely a templating module. So, it allows the combination of json with a template to deliver html output.
Angular.js is client side framework that allows binding of logic to variables defined in a template (your page).
So, with dust.js you are responsible for deciding when to run the json through the template. Typically you feed in the json on the server (or client) and ask it to render the results.
With angular.js when the model (the json) changes the framework re-renders as appropriate. Triggers for that change could be user actions (such as filling a form in) or it could be due to loading some fresh json from a service.
Typically you would use angular.js if you want a single page JS app (think gmail). dust.js is perhaps more akin to a traditional approach with multi pages with content driven by passing in json.
You could even use the both of them in tandem - server side rendering using dust.js with dynamic client side logic in angular.js.