This isn't platform / or language specific really, I'm just asking for some general advice on how to approach what I want to do and what would be the best technologies to utilize.
I want to implement something similar to the way Periscope displays it's likes. Check this CSS / jQuery rework if you're not sure what I mean.
The Set Up :
Basic social network site, built with PHP, where every user has a profile.
What Happens :
User Foo triggers an event on the profile page of user Bar (specific to Bar's page), let's say a "like" for example.
The Goal :
I want that event to trigger a jQuery animation, simple enough to do, and User Foo will certainly see it. But what I want to do is make that event trigger on User Bar's profile page, in real-time for whoever happens to be looking at Bar's profile at the time. So the event Foo triggered will render globally in every other users browser - but only if they are looking at User Bar's profile when it is triggered.
I know this could be achieved with a constant stream of timed Ajax requests looking for any events, but is there a better less resource intensive way of approaching this?
I've recently started playing around with Vue.js and Laravel, and it seems like the broadcast channels could possibly be used for this purpose, but is there anything similar in jQuery that could be used.
Or would you suggest that the jQuery / Ajax approach is the best way to go?
It doesn't have to be jQuery or Vue based, any suggestions welcome if you think there is a better way of doing it, as this is really what I'm asking for, but would rather build this from the ground up and not use a plug-in.
Real-time updates are discussed here: How do real time updates work?
I didn't have the heart to close as duplicate after such an eloquent and well written question :)
Related
I'm beginning to convert a large web application, with a lot of complex JQuery DOM manipulation and an ASP.NET MVC backend, into something more manageable. I'm converting the server-side code into a REST API, and I want to use AngularJS to drive the UI.
I'm starting by converting one area of the app over, which consists of three screens. Making a selection in one screen presents you with a new set of choices, and you can move forward and back. I've managed to achieve this behavior very cleanly by using routes; each choice is a link with href='#/something...', and this causes a change in UI state by loading a different controller/template.
I'm now trying to animate this transition. The ng-animate attribute gets me most of the way there with the enter and leave options, but these actually fire at the same time! The result is visually very confusing. What I'd ideally want is a clean way to manage the following sequence of events:
User clicks on a button in the first screen
First screen animates out
At the same time, request is made to REST api for the next set of choices
After the previous two things are complete, the second screen animates in.
I can achieve this without animation by using the resolve parameter to the $routeProvider, but I don't know how to make the animation work properly! What is the correct to manage this kind of state?
You can write your own code that will implement animation as described here:
http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate
So perhaps it is possible to do it like this:
On "Leave" you start the animation and fire the request to the server.
At the same time on "Enter" you do not start the animation right away. You are waiting for the signal from data loader.
Server responds with data. You signal that this is ready.
"Enter" implementation starts the animation.
How monitor the flag? You can simply watch global variable with setTimeout, but this is kind of ugly. I think this would be much better to use some sort of pub/sub mechanism that would allow you to subscribe to "data ready" event. For example, I use postal.js and is quite satisfied with it.
So I have been making stuff in Unity3D and decided to try an extension called Playmaker. Basically is uses a FSM (Finite State Machine) to design the flow of states and events. You can drag an event to a different state to trigger another state of events, etc. (Reference : http://www.hutonggames.com/features.html)
NOTE : The actual product I linked has nothing to do with the idea I want to try and build. Just a reference.
Well I would love to be able to do something simliar in Javascript. I think I have some of the logic down but I'm thinking more about User Experience. I want a user to be able to create an FSM with my logic in the browser using Javascript.
I'm not asking for anyone to code this for me or anything as I am experienced enough in javascript to do the bulk of it. I was thinking more about the way you can drag one event to another and it creates a visual arrow showing the user what events are connected. If you look at the first tutorial on the referenced link I provided you will understand what I mean. The arrow length and curves would be dynamic. Possibly be able to drag around states to re organize the layout of the states. This would obviously change the way the arrows pointed as well.
I hope that all made sense.
Ideas? Pointers? Maybe someone has done something like this already? I did find one Javascript State Machine but it generates once, doesn't allow users to move anything, the event dragging to another state is very important.
How I do monitor all the clicks and inputs on my page? I would ideally want to make a video of what the user does on my app; the way they uses my app.
How do I go about this?
Any links or demos would be really great.
Edit : What I have in mind is:
log all the events into a cookie , and send it to the server in frequent intervals.
then startup a Firefox session and trigger these events on the page . and capture it as a video.
Edit: Basically I have an app, and I want to see what the user does on the app, so I will monitor their clicks and inputs (that's pretty much what they do on the click), and then trigger those events back on my web app. So I will pretty be able to replicate their actions on my page. Now the question is, how do I capture all the necessary events, how do I serialize and trigger these events for later?
Not sure that you can make a 'video' unless you tracked every single movement of the mouse, which would extremely unfriendly, probably take a lot of processing time and raise ethical questions.
If you want to know how a user interacts with your site so that you can improve it (presumably) then you need to get into web analytics.
There are many options. My personal favourite is Google Analytics
With JavaScript you can create what's known as a heatmap of use clicks:
http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/
You can't capture a video of the users desktop session using JavaScript.
I remember seeing ClickHeat (or a similar variant) a long time ago. Had no experience with it, so I can't help with pros and cons, and it doesn't answer your question entirely (don't think it does keystrokes, although maybe I'm wrong, like I said I don't really know).
Might not be a total solution, but should be a good starting point.
In a similar vein it wouldn't be hard to capture mouse position every so often along with a timestamp and recreate a given user's actions. Generating a general/average movement is much more difficult with this type of data, but it's useful on the single-unit basis. So too with keystrokes, they're all just events.
I want to make a web page with several type of forms,each one on a different area that allows those areas to be rearranged and user will be able to change their position according to their preference.(X form to the left top, Y form to the right bottom etc.) i don't know what that type of windows are called, but think you can get a idea what I'm mentioning here.only thing i know is it can be achieved with javascript, i searched for it but i can't find the relevant tutorial or guide to self study.
some one please tell me what they are, and how to make them and include in my web page? is there any thing that ease of making those thing except javascript?please provide me a source of studying and i really appreciate the instructions of the knowledged people.thanks in advance!
regards,
rangana.
The nutshell version is that you wait for a mousedown event, store information about where the click started and where the element started, wait for a mousemove event and change those positions, then wait for a mouseup event to clean up afterwards.
Usually, this is best achieved by just using a library such as YUI or jQuery UI
I'm coming across a bit of an awkward problem. I have a Web page with quite a few buttons on it that need to be disabled and enabled at various points. Now if this were a Swing (or any otehr desktop UI interface for that matter), it would be quite trivial: I would simply add listeners for the model changes I was interested in and update the UI accordingly.
This is basic MVC stuff really.
Thing is, I'm at a bit of a loss as to how to handle this nicely in Javascript. I'm going down a route that will end up with some real spaghetti code where the click listeners for the buttons are updating the UI controls and that's just not going to end well.
EDIT: Let me give you a more concreate example.
Example
Imagine a screen that lists open orders. Those orders are presented in a table as each row (order) has multiple attributes against it, such as who is currently managing the order, who made the order, what it's for, when the order was made and the status of the order.
I've done it so you can select one (or more) of these orders by clicking on the rows. This adds a "selected" class, which changes the styling, much like a list.
As to the behaviour, if a user selects one order then certain actions become available, such as Open Order (to view the details), Take Owneship, Cancel and so on. The attributes of the order may also affect what actions are available eg if the order is "owned" by somebody else already, certain actions will be disabled.
Some of these options (like opening the order) aren't available if you've selected multiple orders.
Additionally via a background Ajax call the list refreshes with new orders periodically. The user can also click refresh or can filter the orders (by name, date range and so on) and then reload the orders. While the orders are reloading certain buttons get disabled.
I was going to do a second example but I think that one is sufficiently complex to illustrate the kind of problem. Now I've started this by giving various controls classes. For example, elements with the "select" class might be disabled/enabled/styled when an item is selected.
Now this works reasonably well in simple cases but I'm running into problems where the state of a control depends on multiple conditions. Also the classes are getting fractured by things like some elements want to be styled, some controls want to be disabled/enabled and in some cases both things need to happen.
In Swing I tended to handdle this kind of thing by having a sort of updateUI() method, which would be called whenever the state of a relevant control or model was changed. It would then set the state of all the controls explicitly. Now this is arguably not the most efficient way (eg if you have 30 controls and only need to update one of them it's a bit of a waste) but I found the simplicity was worth it. The alternative was that controls/models ended up with too information about what controls they depended on or those that depended on them. It go tmessy from a coupling point of view.
But I have no such (obvious) mechanism in Javascript. Inobtrusive Javascript as advocated by jQuery is great because it stops random code snippets being littered throughout your code. But I need to go a step further nad have some way of managing the complexity of this (because it is quite a complex screen and will only get more complex).
If you want to preserve your sanity, use a state machine.
You don't really give details about what your UI does, so I'll make up an example. Let's say you have a file upload page. The user should be able to select a file, click an upload button, and then be returned to the page they came from, when uploading is complete. So you could have three states, "SelectFile", "Uploading", "Finished". In the "SelectFile" state, controls should be enabled to allow the user to select a file. In the "Uploading" state, these control should be disabled, and the user should see a progress indicator. In the "Finished" state, the user should be redirected.
Of course, it sounds like your case is more complicated, but the same ideas will apply. You may need more than one state machine, if portions of user interface interact. That's fine.
When you want to change the enabled/disabled elements on the user interface, you just change the state of the state machine. The state machine itself tells the various user interface controls to update themselves based on the current state. You can use a Bharani's (good, up voted) suggestion of using classes to do this. Or whatever mechanism works for you.
The nice thing is that the controls no longer interact with each other. They only interact with the state machine. So you get rid of all the cases where states bounce around incorrectly or endlessly recurse.
Assign specific class names to the divs. That way even if they overlap in functionality you can simply keep adding class names to the div and because of the chain nature of jquery all registered event handlers will be executed.
For controlling form elements during ajax call - you can add ajaxStart and ajaxEnd or you can use ajaxComplete and handle all your code inside the callbacks.
I think i get your problem. I have worked on such screens before and i always ended up refactoring to structure the code better. But at times it will be easier if you could re-organize the functionality itself so that you don't have to handle all things in one place. I think GUI should also be treated like a function - do one thing and one thing well.
I think data modeling is important for JavaScript apps. I am working on this scheduling project for medical clinics and I have a JSON data structure that models chairs/patients in an office. Ember updates the views (UI widgets) automatically when the business logic changes in the models. So right off the bat a lot of sphagetti code is eliminated. If you are doing something graphically intense with user interaction it is almost a crime not to use an existing MVC pattern or to create your own MVC JS classes. The structured discipline is off putting at first but when you see later how it lowers your blood pressure and makes maintenance so much more enjoyable it is worth it. I wouldn't use it for simple one-off projects if they are small. It is better for medium complexity or advanced complexity. Anything that will take me more than a week I will use Ember. I have used knockout.js and Angular and I really like Ember with its Handlebars templating syntax. Easy on the eyes and efficient.