I am trying to have a look at reactJS.
Unfortunately all the tutorials I found assume, that I have an IDE. But I don't want to install an IDE just for this purpose and I even can't do that in my working place.
So I am wondering, how I can use React without an IDE. Just by injecting the necessary library-files. I don't care, if it is working slower than otherwise, I just want to get it to work.
JSbin and Co are only secondbest choices, because I want to store the written files for later of course.
Does anyone know a tutorial, that describes, which libraries I have to inject and how I can get the first steps?
I hope, someone can help. Regards
Christian
Btw, my actual attempt looks like this:
<!doctype html>
<html>
<head>
<title>React</title>
<meta charset="utf-8">
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
</head>
<body>
<div id="react-container"></div>
<script type="text/jsx">
var meineKomponente = React.createClass({
render: function() {
return <h1>Hallo Welt</h1>;
}
});
React.render(<meineKomponente />, document.querySelector('#react-container'));
</script>
</body>
</html>
The information for this is gathered from different places and of course, it doesn't work.
There's some browser-based IDEs.
StackBlitz -- https://stackblitz.com/ -- only heard about this recently, so haven't actually used it, but it seems real nice. As a bonus, it has a quick start template for ReactJS projects, which might be exactly what you're looking for.
Cloud9: https://c9.io/ -- Always a solid choice.
There's more, I'm sure.
You don't need any specific IDE to use a library or framework. You can use notepad, or textedit and achieve the same results.
The question is, why would you not use an IDE? Code completion, automatic linting, and a near-infinite number of useful plugins are all at your disposal if you go the IDE route.
As far as tutorials go, Facebook's own React docs have a great tutorial which covers all of the basics: https://facebook.github.io/react/tutorial/tutorial.html
If you're concerned that they're using ES6, you could use JSFiddle to see what's gone wrong:
https://jsfiddle.net/tt6uet4a/1/
var MeineKomponente = React.createClass({
render: function() {
return <h1>Hallo Welt</h1>;
}
});
ReactDOM.render(
<MeineKomponente name="World" />,
document.getElementById('react-container')
);
As far as your code goes, you'll need to use ReactDOM's render function, as well as uppercasing your JSX element name.
To develop React, you do not need an IDE. All you need is a terminal and a text editor.
I assume that you are thinking React as a javascript library like jQuery, that's why you are including React to a script inside head tag like "old-school" javascript.
For a simple start with React, I think you should first have a look at nodejs. Try to install it, then follow create-react-app.
Related
I converting a Polymer app to Polymer 2. I'm changing my components to the ES6 Class syntax (yes I know I could leave them in v1.7 hybrid style but I would like them to be ES6 Classes).
However when I transpile the code back to ES5 (with BabelJS) I run into a known issue regarding ES5 'classes' extending native elements (https://github.com/babel/babel/issues/4480).
I tried babel-plugin-transform-custom-element-classes but that didn't work.
So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs
But the shim doesn't work! I don't know what I'm doing wrong :(
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
/* transpiled to ES5 */
class YExample extends HTMLElement {}
customElements.define('y-example', YExample);
</script>
Here is my jsbin:
http://jsbin.com/feqoniz/edit?html,js,output
Notice I'm including the custom-elements-es5-adapter.js,
also notice the JS panel is using ES6/Babel.
If you remove the custom-elements-es5-adapter.js and change the JS panel to normal Javascript (not ES6/Babel) then everything works fine.
You can include or remove the adapter (leaving ES6/Babel) and the error is basically the same thing, except that when the adapter is included it comes from the adapter code instead: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I must be doing something silly? Any ideas?
Well, I was doing something silly.. I should have tried upgrading my Babel package.
Upgraded BabelJS from 6.23.1 to latest 6.24.1 and it fixed the problem. :P
I was stucked with the same issue.
The problem was due to my build chain (gulp) transpiling every js files of the project. But the custom-elements-es5-adapter.js file must not be transpiled to work. Transpile everything but this file.
I am having a similar issue and I found a solution that works for me.
Disclaimer: I don't use an app-shell because I have a server-side rendered site with just a few isolated Polymer components on the client-side.
After intense debugging the issue came down to the fact that I was including this block (as suggested on the Polymer guides):
<div id="autogenerated-ce-es5-shim">
<script type="text/javascript">
if (!window.customElements) {
var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
ceShimContainer.parentElement.removeChild(ceShimContainer);
}
</script>
<script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>
Because when I ran polymer build it would pick up custom-elements-es5-adapter.js from there.
This is what I did instead:
<script type="text/javascript">
if (window.customElements) {
document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>
YES it's not as elegant and quite rustic but, hey, it works! Here I'm tricking the compilers inside polymer build and they won't find this file and hence they won't include it in the build.
I hope it helps!
I am creating a website with HTML5 and CSS, not using CMS. My next goal was to make the website in many languages so I searched and found many libraries. I am newbie to this and went for the easiest one or the one with more comments, examples...
So I took i18next, but I also tried i18n, i18next.amd... Right now I am stuck because I was following a few tutorials and cant make this work... Everytime I get this error
Uncaught ReferenceError: i18n is not defined
So I created an empty project just to make this work and learn how to do it. This new project is really light. The structure is:
index.html
locales
en
translation.json
es
translation.json
default
translation.json
js
jquery.min.js
i18next.min.js
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/i18next.min.js" ></script>
<script type="text/javascript">
var options ={
lng: "en" ,
resGetPath: './../locales/__lng__/__ns__.json'
};
i18n.init(options, function(t) {
$(".nav").i18n();
});
</script>
<ul class="nav">
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</body>
</html>
and all of the JSON files are like this:
{
"app": {
"name": "i18next"
},
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
I wish someone can help me, and I will really appreciate. (sorry for my english btw)
Tutorials I mentioned:
http://i18next.github.io/i18next/
http://jsbin.com/yaxofuhuzu/1/edit?html,js,output
www.davidhamannmedia.com/en/post-i18next-an-easy-to-use-translation-javascript-library
And many more...
The documentation for this library is a mess, mostly because the author decided to rewrite it from version 1.x to 2.x and the API has changed drastically. The documentation you can now find on http://i18next.com/docs/ refers to version 2.x, while a lot of the blog and stackoverflow articles refer to version 1.x, adding to the confusion. To add insult to injury, I can't find any complete documentation for version 1.x anymore (which by the way, is less than a year old).
Now, to answer your question, the options and API you seem to be using are from version 1.x (for example, resGetPath doesn't exist in version 2.x). Also, in 2.x, i18n has been replaced by i18next.
On the bright side, the author seems to reply fast to questions, so you might as well open an issue on the project github page. Or check this:
https://github.com/i18next/i18next/issues/618
I have a website that's build using JS for the client-side and PHP for the backend with a MySQL backing DB. I started unit testing everything, and the back-end was fairly straightforward using PHPUnit.
In the same spirit, I wanted to start testing the client-side and opted for QUnit. However, we're using Kendo UI and I'm a little lost as to how I could automate my tests without practically reinventing the wheel.
Say I have a modify.js file, where after I define everything I have the following jQuery:
$(document).ready(function() {
$("#user-menu").kendoMenu();
var modify = $('#modify');
kendo.bind(modify, modifyViewModel);
kendo.bind($('#numTagWindow'), numTagWindow);
modifyViewModel.initForm();
$(window).on("resize", function() {
kendo.resize($("#trip"));
});
});
Here, modify.php is an html file with some PHP and corresponds to the view that users get when they go to modify some corresponding setting. In a separate jsTest.js file which is incuded in modify.php, I have all my QUnit tests pertaining to modify.js.
My question is the following: What would be the standard approach for unit testing here, automated or otherwise? As it stands, since the same HTML page is being used for numerous tests my only current option is manually trying out every single option to see if the assertions pass.
In the case where a said function depends on the type of pre-selected input, this gets even worse. I'm forced to put a different number of expected assertions based on input (admittedly, this may be a design flaw).
How should I approach this? Would it be possible to just 'reset' the page using multiple $(document).ready's and run the tests in that manner? In that case, what would be the easiest way to provide the user input to the client-side code?
I haven't ever tested an app with KendoUI before, but I assume it's similar to any other front-end library... that is, you can either use whatever built in tools they have, mock out the library, or do more "integration" testing rather than unit testing. For your minimal example above mocking isn't so bad, but you can imagine it getting out of hand. As such, I'd say integration testing is best, and you can use QUnit for that (along with jQuery), you just have to "write" all of the actions you're testing.
Of course, you also need to have some strategy for making the tests atomic by resetting the HTML blocks, or separating the various blocks into different test files, or something else...
Here is an uber basic example of a QUnit test file with an html fixture that gets reset after each test. Note that by using the document.ready() call in your source code you basically negate the ability to do any of this. If you strip that out and an init() method of some sort things will work much better.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/qunit-1.14.0.css" />
</head>
<body>
<div id="qunit"></div> <!-- required! -->
<div id="qunit-fixture">
<!-- HTML to be reset for each test -->
<div id="user-menu"> <!-- whatever you need in here --> </div>
<!-- whatever other HTML you need for these tests -->
</div>
<script src="lib/qunit-1.14.0.js"></script>
<script src="path/to/source-code.js"></script>
<script>
QUnit.test("Test some trigger", function(assert) {
myCode.init(); // used to be in your document.ready()
$("#someTriggerButton").click();
assert.ok($("#someElement").hasClass("foobar"), "Ensure the element has the correct class after clicking trigger");
});
// Note that after this test runs, before the next test runs,
// the HTML inside of #qunit-fixture will be reset to its value when freshly loaded
QUnit.test("Another test", function(assert) {
// ...
});
</script>
</body>
</html>
So there's something to start with... This is intended to be used with HTML fragments, not entire pages. Of course, there are lots of other ways to do things. Unfortunately, your question is a bit too vague to really give you a specific "solution". If you try something out and have issues, please post another question on here and we'll try to help.
All, I am working on a highly interactive web application which will need a lot of jquery or js code, And I'm finding that my code is becoming a little hard to maintain and is not all that readable. Sometimes even the author can't find the specified code.
So far what I had done for the clear code is below.
One js component in one js file .(for example. CustomTab.js is a tab component in my app.)
Using the templete to generate component HTML based on JSON.
Using Jquery UI.
Unobtrusive JavaScript.
Is there any other points I need pay attention? Anyway, Any suggestion or recommend technique for making js library/framework easy to miantanance is appeciated, thanks.
I could suggest you to use module pattern together with RequireJS to organize your JavaScript code. For the production you'll be able to use RequireJS optimizer to build your modules into one JavaScript file.
Also if you're expecting that your client-side application will be huge, consider to use some JavaScript MVC framework like Backbone.js together with the server-side RESTful service.
I use this namespacing pattern for my libraries:
MyLibrary.ListView.js:
var MyLibrary = MyLibrary || {};
MyLibrary.ListView = {
doSomethingOnListView: function() {
...
return this;
},
doSpecialThing: function() {
...
return this;
},
init: function() {
// Additional methods to run for all pages
this.doSomethingOnListView();
return this;
}
};
Whichever page needs this:
<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script>
<script type="text/javascript">
$(function() {
MyLibrary.ListView
.init()
.doSpecialThing();
});
</script>
You can even chain methods if a certain page requires an additional function.
This is exactly the same question which I ask myself each time. I think there are few ways to get easy maintaining code.
Contribute in javascript opensource projects and understand how they solved that problem. I think you can gather some unique solution from each project and common part of projects structure will answer to your question about maintenance.
Use prepared solutions like backbone, knockout, ember or angularjs if I am not mistaken angular doesn't give you structure but provide you powerful tool for creating pages with less code. Also check todomvc for ready-made solutions.
Read books and try to create some structure for your needs. It will be difficult and long but result (maybe few years later :)) will be awesome.
Currently I'm also working on a JS framework for my company. What I'm doing is I use OOP elements for JS. In other words I'm implementing similar code to C# libraries(not that similar, simulating will be the correct word). As an example in C# you use Microsoft.Window.Forms, so I can use JSOOP and use method extending and overriding to create the same scenario. But if you gone to far in your project converting your JS code to JSOOP will be time consuming.
use JSLint, this will validate your code and bring down to a readable, script engine friendly code. Though JSLint is very strict so you can use JSHint also.
using seperate file for each component is a good idea I'm doing it also.
If you like you can download the jQuery developers version and you can have a general idea how they created the framework. I learned lot of thing looking at jQuery framework!
I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules?
So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source.
Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code.
The page
<!--
Experiments with Debugging
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>console me</title>
<style type="text/css">
#import "../dojoroot/dojo/resources/dojo.css";
#import "../dojoroot/dijit/themes/tundra/tundra.css";
#import "edf.css";
</style>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js">
</script>
<script type="text/javascript" >
dojo.registerModulePath("mytest", "../../mytest");
dojo.require("mytest.example");
dojo.addOnLoad(function(){
mytest.example.greet();
});
</script>
</head>
<body class="tundra">
<div id="bulletin">
<p>Just Testing</p>
</div>
</body>
</html>
<!-- END: snip1 -->
The java script I'd like to debug
dojo.provide("mytest.example");
dojo.require("dijit.layout.ContentPane");
/**
* define module
*/
(function(){
//define the main program functions...
var example= mytest.example;
example.greet= function(args) {
var bulletin = dojo.byId("bulletin");
console.log("bulletin:" + bulletin);
if ( bulletin) {
var content = new dijit.layout.ContentPane({
id: "dummy",
region: "center"
});
content.setContent('Greetings!');
dojo._destroyElement(bulletin);
dojo.place(content.domNode, dojo.body(), "first");
console.log("greeting done");
} else {
console.error("no bulletin board");
}
}
})();
(Answering this myself because it seems like a common problem whose solution is not well known.)
It seems that one can nicely debug eval-ed code in FireBug provided that dojo does a little cooperating. The trick is to configure dojo to enable such debugging using debugAtAllCosts
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>
This is described on dojo campus under debugging, which also notes that this setting is not recommended in production for performance reasons and suggests an approach using server-side conditionality to control whether such debugging is enabled.
Also, if you are using a version of Firebug less than 1.7a10 also verify that you have the "Decompile for eval() source" on the scripts drop-down disabled (extensions.firebug.decompileEvals in about:config). When enabled I think this causes Firebug to overwrite the source with its own decompiled version and somehow lose the filename along the way as well.
#peller, This could be why your answer wasn't working for us.
It's disabled by default, but I turned it on at some point and didn't realize it.
It's also being removed completely in 1.7a10 as part of Firebug issue http://code.google.com/p/fbug/issues/detail?id=4035. Also related discussion at https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion and https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion.
Here's a solution I found for the inability to recurse into dojo.require mudules from reading the NGs.
Change
<script src="dojoroot/dojo/dojo.js" type="text/javascript">
to
<script src="dojoroot/dojo/dojo.js.uncompressed.js" type="text/javascript">
This fixes the less than helpful
undefineddojo._scopeArgs = [undefined];
error that one sees otherwise.
The pattern is essentially xhr+eval... really it's the eval that's the problem... Firefox in particular has no way to track code from an eval back to its original source and instead points at the eval call site, plus whatever line offset there is in the eval buffer. Firebug has implemented a clever scheme to workaround this problem, and added an optional hint which loaders like Dojo can use to embed the original file path in a comment. Webkit now supports this scheme also. It's not perfect, but debugger; and other breakpoints ought to bring you into the correct buffer.
I'm not sure why none of this would be working for you. Which version of Firebug are you using?
djna's debugAtAllCosts solution works for me, for the reasons described at http://dojotdg.zaffra.com/tag/dojorequire/.
However, note that using debugAtAllCosts causes dojo.require to become asynchronous because it uses script inserts rather than xhr+eval. This can cause problems with code that expects dojo.require to be synchronous that isn't brought in using require itself (as described at http://kennethfranqueiro.com/2010/08/dojo-required-reading/). In my case it was testing code I had being run by unit test framework. So the following failed saying that EntityInfo was not defined
var e1 = new EntityInfo();
until I changed it to
dojo.addOnLoad(function() {
var e1 = new EntityInfo();
}
#peller, For me FireBug 1.6.1 will take me to the right eval block but not the right file and line numbers (because its an eval string rather than the original file)..
I'll add one more alternative, use Chrome. It's great for debugging evals (seems to catch some things Firebug doesn't). Do be aware of its issue with caching JS files - http://code.google.com/p/chromium/issues/detail?id=8742.
Personally Firebug is still my main environment, but I am now also using Chrome when things get tricky with evals to get a second view at the problem. Chrome helped me twice yesterday with undefined function/variable issues with the dojo loader that Firebug skipped right past).