I am new to adobe Analytics. I am trying to track form errors that are occurring when the user submitting the form without filling the required fields.
So here what I did was, passed form values to list prop to capture the values. But I am not getting how to implement events to track against these values.
Can anyone please help me with how to implement rules and events in the adobe launch for tracking?
Yes, there are a few ways to do it.
The recommended way is to ask the Front-end team to send an error event that Launch can listen to. It can be done in a few ways. It's considered the best practice to install the adobeDataLayer extension: https://experienceleague.adobe.com/docs/launch/using/extensions-ref/adobe-extension/acdl/overview.html?lang=en
The extension provides ability to use a dataLayer very similar to GTM. Very comfortable.
The other way to do it is ask the devs to send a simple JS customEvent with error details in the detail property of the event.
Launch can natively listen to JS events and gives access to the event object.
Finally, the worst kind of implementation, that should be mostly considered as a hack, is the become visible trigger:
you're supposed to detect the actual error message with this trigger. I suggest not using it since the enters viewport listener is a bit heavy. And it also depends on the DOM structure since you'll have to provide the CSS selector for the error message.
This is not all, surely. You can build your own settimeout polling logic to look for the errors manually, or ask devs to send direct calls, but those are even worse solutions, so I'm not elaborating on them.
I have a Redux app and I am using redux-dev-tools for its debugging primarily. Unfortunately its often not enough to debug and get clear vision of which methods call which. I am looking for a way to see all of the methods called from the point I change something on the screen to the point where the updates stop. What I want to see is just a set of the relevant methods called with their lines of codes in the app. redux-dev-tools just shows the dispatched actions and then changes in the state (trace - is useful but thats very little), but thats not enough for me: I want to know full call stack excluding what is done behind the scenes by the redux itself. Are there any tools for that? How would you approach the issue? The ideal case would be the generation of some kind of chart with the call stack and lines of codes.
I can have such a situation when an action is triggered, then asynchronous request runs, then half of the page gets updated and redrawn, then another request happens, etc. I want to know better the call stack in this case. Or imagine if a single button click causes several requests to run and multiple actions to be dispatched, etc. Its for overcomplicated cases. I need to have clear diagrams/methods for better debugging and optimization.
I am currently working on a tool that reads Excel files and displays them in a webApp. I split just like in Excel every worksheet in different tabs. When switching Tabs its taking like 2 seconds to this. That's because the Excel -> Json is 8000+ Rows long. It's probably redux that can't handle such massive Json's.
I did some research but I don't know if any of my solutions could work. And if so which one would be the best ?
immutable.js
redux-orm
Multiple Stores (But this is a "don't")
Maybe someone has a better solution for handling large data.
Redux is not the issue
Redux can handle huge amounts of data and should not be an issue in this case. It's more likely that it is a problem occurring from a rerender. Even tabs that are not in the view are likely to rerender as you swap between them, to test this remove extra tabs until you just have 2 and test clicking between them and seeing how long the rerender takes. Read the performance section in the docs here.
Optimize
When dealing with large amounts of data micro optimisations can really help. If you are using the Container component, Presentational component pattern then make sure you presentational components are using the PureComponent subclass. This will help you stop re-renders that eat memory.
The alternative to PureComponent is shouldComponentUpdate, you can specify the rules of when an update/rerender should happen.
Inside the react dev tools there is a check box that lets you check when a component rerenders please check that and start moving around your app. It will show you all of the pointless rerenders that are being fired.
Another way to help optimise is lazy load, "why show 8000 records when the screen can only fit 100?". This has 2 effects, you don't get data that you're not going to look at and you dont render cells that are not on the screen.
I hope this gives you some idea of how to move forward, good luck.
Using the Cups c api I am able to see the state of a printer (such as paused, printing, jammed ect.) What I am trying to do now is to listen for, or lock against a change in a printer's state. Ultimately I want a live view of a printers state, but I don't want to have a delay loop spamming cups with printer attribute requests.
I have seen many functions and tags in the source code and documentation that hint towards some kind of event system, but I have been unable to figure out how to utilize it. Any help is welcome, even just pointing me towards the right function.
I used this example in my current implementation to get state information. http://cups-dev.easysw.narkive.com/9RO0OBnZ/how-to-get-printer-status-via-cups-api
It ends up this was a very complex question and involved a lot of work to figure out. The only sane way I found to listen for changes was to use the rss notification system. I would advise against attempting to make your own notification module, I wasted a week of my life trying that (I'm not even sure it is possible anymore). Use the Create-Printer-Subscription with a uri like rss://localhost:8000. You will of course need a listener waiting for the xml data.
I put up an a simple debugging tool I made with java/jna here. Select 2 to set up a subscription, you will need to listen for the data yourself though.
I'm getting to be a fan of David Nolen's Om library.
I want to build a not-too-big web app in our team, but I cannot really convince my teammates to switch to ClojureScript.
Is there a way I can use the principles used in om but building the app in JavaScript?
I'm thinking something like:
immutable-js or mori for immutable data structures
js-csp for CSP
just a normal javascript object for the app-state atom
immutable-js for cursors
something for keeping track of the app-state and sending notification base on cursors
I'm struggling with number 5 above.
Has anybody ventured into this territory or has any suggestions? Maybe someone has tried building a react.js app using immutable-js?
Edit July 2015: currently the most promising framework based on immutability is Redux! take a look! It does not use cursors like Om (neither Om Next does not use cursors).
Cursors are not really scalable, despite using CQRS principles described below, it still creates too much boilerplate in components, that is hard to maintain, and add friction when you want to move components around in an existing app.
Also, it's not clear for many devs on when to use and not use cursors, and I see devs using cursors in place they should not be used, making the components less reusable that components taking simple props.
Redux uses connect(), and clearly explains when to use it (container components), and when not to (stateless/reusable components). It solves the boilerplate problem of passing down cursors down the tree, and performs greatly without too much compromises.
I've written about drawbacks of not using connect() here
Despite not using cursors anymore, most parts of my answer remains valid IMHO
I have done it myself in our startup internal framework atom-react
Some alternatives in JS are Morearty, React-cursors, Omniscient or Baobab
At that time there was no immutable-js yet and I didn't do the migration, still using plain JS objects (frozen).
I don't think using a persistent data structures lib is really required unless you have very large lists that you modify/copy often. You could use these projects when you notice performance problems as an optimization but it does not seem to be required to implement the Om's concepts to leverage shouldComponentUpdate. One thing that can be interesting is the part of immutable-js about batching mutations. But anyway I still think it's optimization and is not a core prerequisite to have very decent performances with React using Om's concepts.
You can find our opensource code here:
It has the concept of a Clojurescript Atom which is a swappable reference to an immutable object (frozen with DeepFreeze). It also has the concept of transaction, in case you want multiple parts of the state to be updated atomically. And you can listen to the Atom changes (end of transaction) to trigger the React rendering.
It has the concept of cursor, like in Om (like a functional lens). It permits for components to be able to render the state, but also modify it easily. This is handy for forms as you can link to cursors directly for 2-way data binding:
<input type="text" valueLink={this.linkCursor(myCursor)}/>
It has the concept of pure render, optimized out of the box, like in Om
Differences with Om:
No local state (this.setState(o) forbidden)
In Atom-React components, you can't have a local component state. All the state is stored outside of React. Unless you have integration needs of existing Js libraries (you can still use regular React classes), you store all the state in the Atom (even for async/loading values) and the whole app rerenders itself from the main React component. React is then just a templating engine, very efficient, that transform a JSON state into DOM. I find this very handy because I can log the current Atom state on every render, and then debugging the rendering code is so easy. Thanks to out of the box shouldComponentUpdate it is fast enough, that I can even rerender the full app whenever a user press a new keyboard key on a text input, or hover a button with a mouse. Even on a mobile phone!
Opinionated way to manage state (inspired by CQRS/EventSourcing and Flux)
Atom-React have a very opinionated way to manage the state inspired by Flux and CQRS. Once you have all your state outside of React, and you have an efficient way to transform that JSON state to DOM, you will find out that the remaining difficulty is to manage your JSON state.
Some of these difficulties encountered are:
How to handle asynchronous values
How to handle visual effects requiring DOM changes (mouse hover or focus for exemple)
How to organise your state so that it scales on a large team
Where to fire the ajax requests.
So I end up with the notion of Store, inspired by the Facebook Flux architecture.
The point is that I really dislike the fact that a Flux store can actually depend on another, requiring to orchestrate actions through a complex dispatcher. And you end up having to understand the state of multiple stores to be able to render them.
In Atom-React, the Store is just a "reserved namespace" inside the state hold by the Atom.
So I prefer all stores to be updated from an event stream of what happened in the application. Each store is independant, and does not access the data of other stores (exactly like in a CQRS architecture, where components receive exactly the same events, are hosted in different machines, and manage their own state like they want to). This makes it easier to maintain as when you are developping a new component you just have to understand only the state of one store. This somehow leads to data duplication because now multiple stores may have to keep the same data in some cases (for exemple, on a SPA, it is probable you want the current user id in many places of your app). But if 2 stores put the same object in their state (coming from an event) this actually does not consume any additional data as this is still 1 object, referenced twice in the 2 different stores.
To understand the reasons behind this choice, you can read blog posts of CQRS leader Udi Dahan,The Fallacy Of ReUse and others about Autonomous Components.
So, a store is just a piece of code that receive events and updates its namespaced state in the Atom.
This moves the complexity of state management to another layer. Now the hardest is to define with precision which are your application events.
Note that this project is still very unstable and undocumented/not well tested. But we already use it here with great success. If you want to discuss about it or contribute, you can reach me on IRC: Sebastien-L in #reactjs.
This is what it feels to develop a SPA with this framework. Everytime it is rendered, with debug mode, you have:
The time it took to transform the JSON to Virtual DOM and apply it to the real DOM.
The state logged to help you debug your app
Wasted time thanks to React.addons.Perf
A path diff compared to previous state to easily know what has changed
Check this screenshot:
Some advantages that this kind of framework can bring that I have not explored so much yet:
You really have undo/redo built in (this worked out of the box in my real production app, not just a TodoMVC). However IMHO most of actions in many apps are actually producing side effects on a server, so it does not always make sens to reverse the UI to a previous state, as the previous state would be stale
You can record state snapshots, and load them in another browser. CircleCI has shown this in action on this video
You can record "videos" of user sessions in JSON format, send them to your backend server for debug or replay the video. You can live stream a user session to another browser for user assistance (or spying to check live UX behavior of your users). Sending states can be quite expensive but probably formats like Avro can help. Or if your app event stream is serializable you can simply stream those events. I already implemented that easily in the framework and it works in my production app (just for fun, it does not transmit anything to the backend yet)
Time traveling debugging ca be made possible like in ELM
I've made a video of the "record user session in JSON" feature for those interested.
You can have Om like app state without yet another React wrapper and with pure Flux - check it here https://github.com/steida/este That's my very complete React starter kit.