Recently I've been setting up a development stack for React using Webpack (new for me) and of course wanted to benefit from all of the shiny conveniences that it provides (which are by the way great!). Among tons of resources I dug on the internet, the particularly good one I found was the React Webpack Cookbook, with which every step went like clockwork. However I stumbled across a hitch that has been taking me several hours to try to solve, not being able to find a solution in the aforementioned page, nor any other source: the expose-loader wouldn't expose React to global scope in Chrome (not tested on other browsers) therefore not allowing React DevTools extension to run. I tried mixing all the steps from the Cookbook, using different versions of React, minified/unprocessed, nothing worked.
The problem was trivial when discovered, but the source of the problem tricky to find: all the time I was using the localhost:8080/webpack-dev-server/ version of my development page, as suggested by the Cookbook, because it allowed me not to bother with the inability to inject <script src="http://localhost:8080/webpack-dev-server.js"></script> into html-webpack-plugin index file generator and provided sort of a nice status bar. It works perfectly since I switched to localhost:8080. Unfortunatelly I wasn't able to make it work with the localhost:8080/webpack-dev-server/ version, though I think it has something to do with the fact that under this url the page is loaded into a frame.
Related
I am making a Next website, and added Snipcart.
The Snipcart UI embeds Vue, and has embedded images in it, and an external CSS file, which all in all add a ridiculous amount of time to my page load time.
I also don't quite like the UI, but that's a more minor issue as it can be customized.
So I was thinking if instead I can incorporate the cart's actual logic into my own React UI, and avoid all of the extra loading time while fully controlling how the cart looks and reacts to events.
I looked around Snipcart's documentation and saw there's actually a REST API, however it seems to be only for getting existing orders/products and such, not quite helpful for an active session.
I wonder if anyone tried this, or if the Snipcart cart's code is open source and available somewhere (I couldn't find it on their github, but I might have missed it).
Thanks :)
That's not possible at the moment, I'm on the Snipcart team, and we have plans to make our JavaScript SDK available as a NPM package eventually so that customers will be able to do custom carts with the technology they like. But, we're a small bootstrapped team, so it's still in the works.
But, we will soon be working on decreasing our footprint, we're aware that our bundle is large and could be optimized.
I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?
I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example
Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.
The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.
I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.
The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!
The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309
Options I found for Navigation without writing an Extention on your own
contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
an other navigation package I found https://github.com/ymzuiku/react-router-hash-history
So far, I have been using prerender.io to make my angularjs websites seo friendly. I have worked okay when it comes to urls with hashbangs (website.com/#!).
Currently, I am making my websites go to html5mode, which doesn't contain hashbangs on url and looks a way prettier. However, even since I went to html5 url, prerender.io doesn't work properly.
Also, I came up with a Google article that claims their new technology allow the engine render Javascript framework websites automatically (https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html). However, as I use 'Fetch as Google' tool in Google Search Console. It renders very poorly and my title and meta description spit angularjs syntax ({{seo.tile}} or {{seo.desc}}), which are not rendered.
I am quite lost where I should start and fix the problems I came across with. I tried to get away from prerender.io cause I don't think we necessarily need it anymore.
Sorry for my poorly organized post and questions. Let me try to clear and tie the questions below.
1) Do we still need to teach the Google bot about the angularjs?
2) What is the most stable and best practice for AngularJS+ExpressJS SEO? I don't wanna try unstable and easily crashable method for this.
Thank you very much for your time.
EDIT
At the time of writing this article, I didn't know about using javascript compiler such as babel. I will say here make sure use webpack or gulp to compile your ES6 codes into stable ones so that your codes can be written as you expect it to be and works well with any 3rd party tools or pacakges.
It's the era of ES6!!!
Finally, I solved my problem and for future reference and others who struggling with the sample problem I had gone through, let me leave what I found.
First of all, the very reason why I was tremendously confused was that even if I take html snapshot with phantomjs, I saw still bare angular syntax like {{seo.title}} and . Very awkwardly the reason was that I was using ES6 syntax across my angularjs module. Since phantomjs wasn't fully adopted with ES6 syntax, it failed to interpret angularjs module and just spat html with unconpiled angularjs... From this, I came up with a unexpected conclusion that it's not a good time to implement ES6 for production.
Secondly, I would not count on what Google confidently announced that their bots can handle the websites with dynamic javascript frameworks like angularjs. Even if phantomjs works, 'Fetch as Google' tool doesn't give me a good result. Some times (actually very often) it resulted in just empty html file. Since still Ajax crawling is supported as a 'fall back', but more stable method, I would count it rather than counting on their very unstable smart bots.
In conclusion, DON'T BE EARLY ADOPTOR especially if you are making business out of it!! For angularJS SEO, (1) follow the Ajax calling guideline even if considered to be deprecated, (2) Don't use ES6 syntax for serious programming stuff.
I have seen many articles regarding the changes in Angular2 . But I can't find much advantage in using Angular2. Can some one point out some new things that can be done using Angular2 which can't be done using the previous versions.
I know there are changes like $scope changed to this. I'm not asking for changes. I'm asking for new features that is in Angular2.
The TL;DR Version
Because ES6 is important to pick up, so no need for a custom dependency management system anymore. ES6 and Angular 1 together get ugly fast, as they together introduce a bajillion coding styles :(
Although the library is overall heavier, the architecture it uses (all component based) is a lot faster, lighter, and modular for a scalable application. See http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor
You receive (upcoming) Server Side Rendering, which enables fast initial load time and Search Engine Optimization (Yay!) See: https://github.com/angular/universal
You receive WebWorker friendliness, which makes your application able to "multi-task". See: https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md
Shadow DOM is not fully inherited by Angular 2 yet, but I'm sure it will be. It has some support right now.
The whole concept of $scope is gone. You receive two way data binding with anything you put in your ES6/TypeScript class, but anything more you need to create a Observable or promise. Unfortunately, you can't just shove anything into the scope, digest, and WALAH! anymore.
And of course, all the cool stuff they mention on their website: https://angular.io/features.html
Hope that helps!
Support for different languages TypeScript, Dart, ES5, ES6.
Change detection is much more effective
Support for isomorphic applications where the same code can run on the server, the browser and a WebWorker in the browser
Moves more work to build time to reduce the time for the initial page load.
Simplified binding syntax
Improved DI
There are also lots of mostly smaller and tiny features that Angular2 doesn't (yet?) support which Angular 1.x does.
we are starting new project which uses angularjs as UI script.
I've gone through angular ui-router for https://github.com/angular-ui/ui-router.
UI-router module really great when compare to ngroute.
But I am afraid about the warning mentioned the ui-router's website homepage.
(Note: UI-Router is under active development. As such, while this library is well-tested, the API may change. Consider using it in production applications only if you're comfortable following a changelog and updating your usage accordingly.)
But i want to use this framework with angular.
Can anyone please suggest, will this cause any performance issue in future, much api will change, etc.
if the current version of angular-ui/ui-router works fine for you that is all you need.
will this cause any performance issue in future
why should it? since you are going to save your copy of the current version of angular-ui and it runs on client side you will never have problems (if you update angular-ui in 5 years of course you are going to have problems, if you never update it will ALWAYS work)
the note you quoted means that the current support of that library might change, so all you have to do(if they don't provide support for older versions) is to save a copy of those docs.