I have asked this quesion few days before here and no one answered it.
I had asked it in forum.javascriptMVC.com too and now I have a answer, however I need a a bit more idea.
Question:
I read javascriptMVC's documents and I loved it.
But I don't know how to use it in a large scale project.
I think on the server-side a MVC framework is needed or can help so much. And I've worked with server side PHP frameworks.
I am confused, my understanding of JavascriptMVC projects is that they handle client side events on the browser capture events, execute AJAX requests, manage the responses/data from the server and also show them to user in a graphical interface.
I know that in PHP MVC projects we also have controllers (and actions) that any of them is a separate page with a single entry point, my point is that these pages are whole HTTP requests.
I think the combination of these two frameworks would be in a form of a single or few heavy files (including js , css , imgs etc) that loads and managed by another Javascript libary such as steal.js.
Now user can work with site and its actions (as events) that result in running js functions that may change something in the UI or cause a AJAX request, as in Yahoo Mail where most things happens in one page.
So how will this affect the design of controllers and actions in PHP ? I mean normally in PHP MVC frameworks a lot of controllers and actions means a lot of pages. I think because of AJAX the number of controllers and actions should be actually less. I also think because of JMVC most controllers (and actions) should turn to AJAX responders, however how are layouts and views to be handled in this context?
Finally
I want to know about different aspects of using this method(JMVC+MVC). (I am using Yii as my server-side MVC framework and JavascriptMVC as my client-side MVC).
I also want to know about management of data on the client-side.
I would like to understand how AJAX and web-sockets could be used, where we can use AJAX and where we can use websockets?.
I want to understand about local-storage how we can use it for simulated page data management and maybe caching, how we can cache data coming from server as JSON in a form of a page? I am working on a very large project and I want to build its foundation very strong.
Say that you jave a JMVC framework where
The model gets data from the server using AJAX request - expecting JSON results.
The view does not rely on the server, for more that providing the raw HTML.
The Controllers do not rely on the server, for more that serving the JS files.
Essentially you use the server what it "should" be used for, data storage and processing, while you let your client browser handle all the tedious stuff.
Now, lets see how to define a server-side framework. As I see it we have several options, all of them fairly similar, albeit somewhat different (all returning someing in JSON format):
A fully fledged MVC such as cakePHP
Custom implementation
WebService implementation
Personally I would use a WebService, and I already have. Or rather, I used a WebSocket based JSON-RPC WebService.
Using a fully fledged MVC will have it's drawbacks in maintainability and, not insignificantly, server load. But it is very possible, just implement a view which formats the page as JSON...
Making a JMVC client does not, in my view, mean that it cannot request new HTML from the server. But it does mean that that requested HTML should be free of data, other than meta-data the Java-View needs to know where to put data recieved from, for example, the WebService.
So a main page in the JMVC could just contain a single
<div id=content></div>
and menu clicks can fetch a subpage from the server and load the content into content. Then that loaded content can contain some more javascript which starts WebService requests to get data from the server, to display in the empty placefolders it in turn contains.
First check https://stackoverflow.com/a/4458566/718224 after that you can move forward.
Try this (from https://stackoverflow.com/a/8424768/718224)
No, you don't need to use it server-side, but it will help with organization / separation of application and business logic. Depending on the scale of your application, that could help tremendously in the future.
The key is just making sure you organize your backend code well, otherwise you will end up with a monolithic and/or difficult-to-maintain codebase.
Server-side views would contain your HTML and any JavaScript that may or may not make requests to the server. This assumes that you are actually using PHP to build the pages that a user navigates to.
If you have a static html page that builds itself using AJAX requests, then you may not need to use server-side views at all. Your controllers would more than likely be outputting JSON data. If this is the case, it doesn't make models and controllers any less useful.
Try this (from https://stackoverflow.com/a/8424760/718224)
If you are using any of the major PHP frameworks (CakePHP, Code Igniter, Symfony, etc.) then you ARE using MVC already. If your server side logic is more complex than just a few really simple scripts than you probably should be using one of those frameworks listed, using MVC on the server and the client.
Many (most?) larger web apps being built today are moving towards using an MVC framework for both client-side and server-side application code. It's a fantastic pattern for separating concerns for many large applications, especially request/response server apps and event-driven browser apps.
Try this (from https://stackoverflow.com/a/8427063/718224)
Backbone.js connects your application over a RESTful JSON interface. I honestly find that it works wonderfully in conjunction with the MVC framework. If you build a RESTful API, you can let you server manage CRUD updates quite easily. All your server side code will be responsible is saving and sending back JSON objects to Backbone.js. Then let most of your logic and magic happen within the Backbone.js framework.
Try this (from https://stackoverflow.com/a/8078282/718224)
First, a client-side MVC framework like Backbone isn't just for single-paged apps. You can also use it to add some rich interaction to one or many views of a more traditional app. They simply provide structure and data abstractions on the client.
Next, these client-side frameworks are designed specifically to work with your back-end MVC frameworks. Backbone.js (since you tagged it specifically) models and collections work with REST services. They will talk via GET/POST/PUT/DELETE verbs and will ultimately communicate with your controllers on the back-end when they make asynchronous requests.
In the case of Backbone, it talks JSON instead of HTML. In the case of Rails, this is really easily handled in the controller. If the request is an HTML one, then you return a view as HTML. If it is a JSON request (*.json or Content-type) then the controller returns a JSON representation of the data. I am assuming that it is as easy in Django as it is in Rails to have the same controller respond to multiple content requests (HTML, XML, JSON, etc)
may this help you.
client side web apps and rich client side web pages often use jmvc backbones and etc. and with that kind if js libraries and HTML5 technologies like webstorage you can have a more applocation like websites that all things happens in client side like templating management and etc. and just we have ajax request/response to servers to get/set data or update status. and abput first section they are right a jmvc site are more like a single pages websites. ie hotmail yahoo , etc.
Related
Sometimes when I create basic web tools, I will start with a nodeJS backend, typically creating an API server with ExpressJS. When certain routes are hit, the server responds by rendering the HTML from EJS using the live state of the connection and then sends it over to the browser.
This app will typically expose a directory for the public static resources and will serve those as well. I imagine this creates a lot of overhead for this form of web app, but I'm not sure.
Other times I will start with an API (which could be the exact same nodeJS structure, with no HTML rendering, just state management and API exposure) and I will build an Angular2 or other HTML web page that will connect to the API, load in information on load, and populate the data in the page.
These pages tend to rely on a lot of AJAX calls and jQuery in order to refresh angular components after a bunch of async callbacks get triggered. In this structure, I'll use a web server like Apache to serve all the files and define the routes, and the JS in the web pages will do the rest.
What are the overall strengths and weaknesses of both? And why should I use one strategy versus the other? Are they both viable and dependent upon scale and use? I imagine horizontal scaling with load balancers could work in both situations.
There is no good or bad approach you could choose. Each of the approaches you described above have some advantages and you need to decide which one suits best to your project.
Some points that you might consider:
Server-side processing
Security - You dont have to expose sensitive information (API tokens, logins etc).
More control - You will have more control over what you do with your resources
"Better" client support - Some clients (IE) do not support same things as the others. Rendering HTML on the server rather than manipulating it on client will give you more support for clients.
It can be simpler to pre-render your resources on server rather than dealing with asynchronous approach on client.
SEO, social sharing etc. - How your server sends resources, thats how bots see them. If you pre-render everything on the server bot will be able to scrape your site, tag it etc. If you do it on the client, it will just see non-processed page. That being said, there are ways to work around that.
Client-side processing
Waiting times. Doing stuff on the client-side will improve your load times. But be careful not to do too many things since JS is single-threaded and heavy stuff will block your UI.
CDN - you can serve static resources (HTML, CSS, JS etc) from CDN which will be much faster than serving them from your server app directly
Testing - It is easy to mock backend server when testing your UI.
Client is a front-end for particular application/device etc. The more logic you put into client, the more code you will have to replicate across different clients. Therefore if you plan to have mobile app, it will be better to have collection of APIs to call rather than including your logic in the client.
Security - Whatever runs on the client can be fully read by the client. No matter how much you minify, compress, encrypt everything a resourceful person will always be able to do whatever he wants with your code
I did not mark pro/con on each point on purpose because it is up to you to decide which it is.
This list could go on and on, I didn't want to think about more points because it is very subjective, and in the end it depends on the developer and the application.
I personally tend to choose "client making ajax requests" approach or blend of both - pre-render something on the server and client takes care of rest. Be careful with the latter though as it will break your automated tests, IDE integration etc. if not implemented correctly.
Last note - You should always do crucial validations on the server. Never rely on data from client.
What are the pros and cons of processing/creating/parsing HTML server- or clientside.
First Process:
Parsing the html-data on the serverside via Razor
Passing this HTML-code the clientside and include this
Second Process:
Passing data to the clientside
Parsing these for example with javascript for producing HTML-code
Currently, I find only Cons for the first one
The chunk of data is larger, because we are sending not only the
data to the client
Parsing the data on the serverside costs more
for the company.
For the Second Process: The data and all its processes (business logic or sensitive data) will be available for the client to see.
Also, rendering time of the page will depend on the client's computer since its executed locally and not in the server.
My suggestions would be to stay server side to protect your data processing.
Seems like this is mvc vs angular. The difference for me is the indexing of pages by google and other web crawlers. If that is not a concern I like to do as much as I can in the client, and angular or other such html frameworks provide the 'parsing' functionality, as well as two way binding, services, and a host of other features that make client side development in HTML a breeze.
The backend(server) only provide data through api(s), all the page rendering will be done by the front through javascript(ajax).
Generally I think this is a good idea to support multiple clients, for example both the android,iOS,browser can use the same api. Also people may have more clear responsibilities, one can focused on the server or the front only.
However there are some problems I can find at the moment:
1 Reusable layout.
For pages rendered by the backend, we can use some template(layout) libraries like apache tiles to make a uniform look and feel for the while application.
While for the client rendering, none of the ejs,handlebars can fit this.
2 Authentication
Some operations maybe only open for authenticated user, normally we use:
<c:if test="${session.user}!=null">
// put the security operations
</c:if>
While for client rendering, we will have to send ajax to server to make sure the user is authenticated, and then refresh the view, which may cause the rendering steps more complicated.
3 URL parameters parsing
When the pages are rendered by the server, we can get the url parameters easily, for example the #Param #PathVariable. which means we can create any kinds of urls.
While for client rendering, we will have to build a common libraries to parse the parameters ourselves.
4 ...
I think there maybe more problems I have not mentioned yet.
Then I wonder if this kind of design desirable? If yes, are there any common practices we can follow ?
Most modern frameworks (ZK, meteor, django) go this way. Instead of putting everything into one monolith, all data services are implemented as REST or HTTP services which return JSON. The UI just knows when to make which call and is implemented in JavaScript.
Uniform Look&Feel is not something you aim for; most platforms are slightly different and users expect these differences (Apple behaves different than Android or Windows).
As for authentication, you still need to login to the services (most APIs expect a cookie or they won't work). So that doesn't change.
We have a web client built with GWT that talks to a server via gwt-rpc. One part of the app will now use html/js to replace the GWT GUI and we want that part to talk to the server but not via gwt-rpc. What ways are there to migrate a gwt-rpc call to something that will work with a none a gwt client? Today we send and receive java collections that contain object graphs like a list of order objects that have them self order detail objects and so on.
Thanks
Your best bet is using REST. Your data is sent using JSON, which is part of JavaScript so it will always be understood on the client-side. On the server side there shouldn't be any problems finding a suitable library to handle the rest (ha-ha, get it?).
If you're using GWT on the client and server side for now, resty-gwt and Jersey are a popular combo. There was a talk about it on the last GWT.create conference, it's a good starting point.
I have a simple one page HTML website to get user input and a WCF service that takes user input and return a list of strings depending on the input.
I would really appreaciate any guidance to connect the two together. Can it only be done with httpBinding and JSON serialization? Is JSON the best practice in this case?
If so, how do I make calls to the service? Do I need any server side scripting or is javascript on the client side enough?
If so, how do I capture and output the return of the service?
Thanks a lot.
Generally I use Ajax Enabled Wcf Service, with Json in this case. It works great for me
Most of times it's too much unnecessary complication of the system when you create a WCF service, define bindings, endpoints, contracts, host the service and distribute the client when you could simply get the things done with ASP.NET Page Methods + jQuery even getting rid of ScriptManagers.
You can call a Page Method directly from any .html file, you just need to have a single aspx file on the server, users may even don't know about its existence. The method can return your strings in a single string value, separated with any comma-like sign which is processed by JS later on.
You have a great advantage with page methods, 'cause the service is built into the asp.net web application, you're free of heavy, time-consuming mechanical hand-work every time you have to modify the service. My strong recommendation for you is to make use of page methods if you have an asp.net web app and follow KISS principles.