The Status of SEO with languages as Angular and React?

I’m thinking of using Angular or React for a new web project but the SEO are an important part. From what I have read there are ways to solve it but it always results in keeping two page version alive or using an external service that renders the pages.

This sounds like bad options to me?

I have also read some unclear info about that search engines now can read javascript webpages with for example angular or react?

Could someone clarify this for me? Will SEO be as good with Angular as if I was using, for example, ASP.NET MVC?

react, angular 2 and meteor (blaze) browsers compatibility

Sorry for the question, but I’m not able to find the browsers support of these 3 frameworks. I know that they support IE8 or more, but there are not any list from which version of Chrome, Firefox or Opera do they start supporting… I also know that any version which supports ECMA5 methods should work, but not sure if that’s the only tip.

Any util link?

This a very complete in Wikipedia, but not mention to the 3 I need. I will update the Wikipedia page with the information, but need to be sure.

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

Thanks!!!

Controls for enterprise application- Angular2, ReactJs

We are in an interesting stage- we are planning a web application for enterprise users. Our previous application, which we are re-writing, is written in Angular 1.5, bootstrapJs and AngularUi for bootstrapJs.
Are there good ui-control libraries that integrate with Angular2 or ReactJs (with Redux)? For example tables with data binding, multi selects and more. We do not want to invest too much time on writing controls our selves if we go with one of these new technologies…

Angular js for non single-page Applications

I’ve been learning Angular 2 recently, and I must say that this is a great framework if I wanted to build a single-page application.

However, I was wondering how one would integrate angular with a normal, old style websites (say, built on codeigniter) if they only wanted the two way binding functionality?

Of course, I could use angular 2 for that, but with all the routing machinery of angular, it seems rather… out of place. It just seems like I’m trying to use an axe as a hammer.

So, my question is: what would you suggest to someone who wants to build a non single-page website, with old school loading pages, but for the page itself to be very interactive and utilize two way binding? For example, a users list which is a page in itself, but pagination is done via ajax… etc Should I just go with angular2, or maybe another library that’s simply more suited for this purpose? Some suggested that ReactJS may just be what I’m looking for.

What do you think?

How do I use the response in an ajax call to set a value in my jsx in react similar to filter/pipes in Angular 2?

I am learning react and wanted to convert one of my angular 2 components to a react component. I’m running into an issue where in Angular 2 i use a pipe to convert a text variable in the template like below.

<span>{{ message.What | translate}}</span>

the translate pipe calls this function from my pipes.ts file

    @Pipe({
        name: "translate",
        pure:false
    })
    export class Translate implements PipeTransform{
        private headers = new Headers();
        private translated: string = null;
        private prevtext = '';

        constructor(private http: Http) {
            this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
        }
        transform(text: string): string {
            if (text !== this.prevtext) {
                this.prevtext = text;
                this.translated = null;
                this.http.post('https://translate.yandex.net/api/v1.5/tr.json/translate?lang=es-en&key=trnsl.1.1.20160702T062231Z.b01e74e50f545073.41cbb76d976818cfaa0e1ac3ac78b561079e3420&text='+text,{},{headers:this.headers}).map((response:Response)=>{
                    return response.json();
                }).subscribe((data)=>{
                    this.translated= data.text[0];
                });
            }
            return this.translated;
        }
}

now in react i moved my mark up to a js file my render looks like this

render() {
const { props, onScroll } = this;
return (
    <div className="message-content" ref="messageList" onScroll={ onScroll }>
      <ul className="message-list">
        { props.history.map((messageObj,index) => {
          const imgURL = '//robohash.org/' + messageObj.Who + '?set=set2&bgset=bg2&size=70x70';
          const messageDate = new Date(messageObj.When);
          const messageText = messageObj.What;
          const messageDateTime = messageDate.toLocaleDateString() +
              ' at ' + messageDate.toLocaleTimeString();
          var classes = 'message-item avatar' ;
          var me = props.userID == messageObj.Who ? ' me':'';

          classes = classes + me;
          return (
              <li className={classes} key={ messageObj.When }>
                <div className="tint"><img src={ imgURL } alt={ messageObj.Who } className="circle" /></div>
                <span className="title">Anonymous robot #{ messageObj.Who }</span>
                <p className="message-text">
                  <span>{props.translate(messageText)}</span>
                </p>
                <span className="message-date">{ messageDateTime }</span>
              </li>
          );
        }) }
      </ul>
    </div>
);

}

where props.translate calls

translate = (msg,index) =>{
    const { props } = this;

    $.ajax({
      url:'https://translate.yandex.net/api/v1.5/tr.json/translate?lang=es-en&key=trnsl.1.1.20160702T062231Z.b01e74e50f545073.41cbb76d976818cfaa0e1ac3ac78b561079e3420&text='+msg,
      method:"POST",
      data:JSON.stringify({"input":msg}),
      contentType: 'application/x-www-form-urlencoded',
      crossDomain:true
    }).success((data)=>{
        //set variable to data
    }).error((error)=>{
      console.log(error);
    });
  }


 }

where I am stuck is that in angular 2 i set the variable in the callback and angular keeps track of the change and updates the value. I am wondering how do i do that in react. I have seen examples of state changes and stuff but none that shows how to update the value of an object property from an array of objects.
Any help would be appreciated

Move reference between lists in redux store

In my store I have multiple lists of ids which reference to normalized entities.
It looks something like this:

{
  list1: [ 1 ], 
  list2: [], 
  //other lists
  entities: {
    1:{data},
     ... 
 } 
}

Users can edit items and can select in which list the item should be. I can’t find an elegant way to move the item from one list to another if the user changed the list while editing.
To move an item I have to remove the item-id from the old list and add it to the new one.

How should I remove the Id from the old list after having written it into the new one? Looking into every list for the Id and if found removing it seems a bit wrong to me.

EDIT:

To explain my use case further:
There can be n lists, which are dates, for example “08-17-2016” and the items in it are events. A user can change the date of an event and so the event needs to move from one date to the other.

How to create a widget in angular2 that communicate with another angular2 widget in one React app?

I have a parent application that can be in any front end technology stack like angular, angular2, ember, knockout.

For example;

My app is running in react-redux. I created a two different widget says widget1 and widget2 using angular 2. The idea is integrate this two widgets in two different component in same page.

Communication Between Two Angular 2 Widgets In React App

R -> React App, A2 -> Angular 2. C -> Communication. (Seperate Widgets).

Like If i click add, ‘ll hit the service and update the another widget.

So, I can’t fire action targeting widget1 from widget 2. Because, the parent app is “react-redux” app.

How can I make those two widgets interact with each other, and how to achieve communication also?