blob: 9c27527dd3d197ce0f1538423e4b45a9d56a23a1 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.7.1">
<title>Documentation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ************* Meta ************* -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- ************* OpenGraph ************-->
<meta name="description" content="The Eclipse N4JS language and its IDE enable high-quality JavaScript development for large Node.js projects.">
<meta property="og:site_name" content="Eclipse N4JS"/>
<meta property="og:title" content="Eclipse N4JS Language and IDE"/>
<meta property="og:url" content="https://numberfour.github.io/n4js"/>
<meta property="og:description" content="The Eclipse N4JS language and its IDE enable high-quality JavaScript development for large Node.js projects."/>
<meta property="og:image" content="../images/n4js.png">
<!-- ************* Favicon ************-->
<link rel="icon" href="../images/favicon.ico" />
<link rel="icon" type="image/png" href="../images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="../images/favicon-16x16.png" sizes="16x16" />
<!-- ************* Back-to-top JQuery ************* -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- ************* Prism.js Syntax Highlighter ******-->
<link href="../styles/prism.min.css" rel="stylesheet"/>
<script src="../scripts/prism.js"></script>
<!-- ************* Styles ************* -->
<link rel="stylesheet" type="text/css" href="../styles/n4js-adoc.css">
<!-- ****************** NavBar ****************** -->
<div id="menubar">
<div class="banner">
<a href="../index.html"><img id="logo" src="../images/n4js-logo.png" alt="N4JS Language and IDE"></a>
</div>
<ul>
<li><a href="../downloads.html"></i>Download</a></li>
<li><a href="../community.html"></i>Community</a></li>
<li><a href="index.html">Documentation</a></li>
</ul>
</div>
<button id="tocbutton">TOC</button>
</head>
<body class="book">
<div id="header">
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p></p>
</div>
<h1 id="_documentation" class="discrete">Documentation</h1>
</div>
</div>
<div class="sect1">
<h2 id="_faq"><a class="link" href="#_faq">FAQ</a></h2>
<div class="sectionbody">
<div class="paragraph">
<p>Find concise answers for the most frequently asked questions about the Eclipse N4JS project.</p>
</div>
<div class="hdlist">
<table>
<tr>
<td class="hdlist1">
<a href="../faq/index.html#faq">Frequenctly Asked Questions</a>
</td>
<td class="hdlist2">
<p>Common N4JS topics such as Open-Sourcing, JavaScript, Java and Typescript Comparison.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../faq/comparison-java.html#n4js-and-java">N4JS &amp; Java Comparison</a>
</td>
<td class="hdlist2">
<p>A comparison between the features of N4JS and Java.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../faq/comparison-typescript.html#n4js-and-typescript">N4JS &amp; Typescript Comparison</a>
</td>
<td class="hdlist2">
<p>A comparison between the features of N4JS and Typescript.</p>
</td>
</tr>
</table>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_features"><a class="link" href="#_features">Features</a></h2>
<div class="sectionbody">
<div class="paragraph">
<p>The <a href="../features/index.html">Feature Table</a> describes the state of all current N4JS Language and IDE features.
For specifics on each feature described here, see their respective feature pages:</p>
</div>
<div class="hdlist">
<table>
<tr>
<td class="hdlist1">
<a href="../features/async-await.html">Async/Await</a>
</td>
<td class="hdlist2">
<p>Learn about the benefits of asynchronous data flows and how they work with N4JS code.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../features/dependency-injection.html">Dependency Injection</a>
</td>
<td class="hdlist2">
<p>Configure dependencies between classes with built-in Dependency Injection support.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../features/generics.html">Generics</a>
</td>
<td class="hdlist2">
<p>N4JS Generics look similar to Java&#8217;s generics with some differences that are illustrated in this article.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../features/modules.html">Modules</a>
</td>
<td class="hdlist2">
<p>Modules help keep code well-defined and easy to comprehend. Read about keeping large projects maintainable with Module support within the N4JS IDE.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../features/nodejs-support.html">Node.js Support</a>
</td>
<td class="hdlist2">
<p>Seamless integration of N4JS projects with existing node.js-based environments.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../features/nominal-and-structural-typing.html">Nominal vs. Structural Typing</a>
</td>
<td class="hdlist2">
<p>N4JS provides both forms of typing. Read the feature on how they are combined in N4JS.</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="../features/testing.html">Test Support</a>
</td>
<td class="hdlist2">
<p>The N4JS IDE and the built-in test execution runtime Mangelhaft were designed from the ground-up to support Test Driven Development. Explore how testing with N4JS will help ensure your projects behave as expected.</p>
</td>
</tr>
</table>
</div>
<hr>
</div>
</div>
<div class="sect1">
<h2 id="_tutorials"><a class="link" href="#_tutorials">Tutorials</a></h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_ide_setup_helloworld"><a class="link" href="#_ide_setup_helloworld">IDE Setup &amp; HelloWorld!</a></h3>
<div class="paragraph">
<p>This short introduction covers the basics of getting up and running with the
N4JS IDE. From installation to running HelloWorld!, quickly learn about new features
of the N4JS IDE, how to create a new project, manage workspaces and begin development!</p>
</div>
<div class="hdlist">
<table>
<tr>
<td class="hdlist1">
<a href="n4js-ide-setup.html#n4js-ide-setup">N4JS IDE Setup Guide</a>
</td>
<td class="hdlist2">
<p>Basic installation and setup instructions.</p>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_npm_export_guide"><a class="link" href="#_npm_export_guide">npm Export Guide</a></h3>
<div class="paragraph">
<p>The npm Export Guide briefly covers the essentials of Node.js development. A simple
code example is written and exported from the N4JS IDE as an npm package, run from
the command line and published to the npm registry. Quickly learn how to streamline Node.js development
using the N4JS IDE.</p>
</div>
<div class="hdlist">
<table>
<tr>
<td class="hdlist1">
<a href="npm-export-guide.html#npm-export-guide">npm Export Guide</a>
</td>
<td class="hdlist2">
<p>Basic npm export and publishing instructions.</p>
</td>
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="_in_depth_tutorial"><a class="link" href="#_in_depth_tutorial">Node.js App with N4JS Tutorial</a></h3>
<div class="paragraph">
<p>Using the built-in example projects as a reference, this in-depth tutorial covers the most important tools and features
of the N4JS IDE. The example project is explained as a domain model and built step-by-step.
New features of the N4JS IDE are introduced along the way such as <strong>modules</strong>, <strong>type annotations</strong>,
<strong>dependency injection</strong>, <strong>testing</strong> with an example test project and more.</p>
</div>
<div class="hdlist">
<table>
<tr>
<td class="hdlist1">
<a href="tutorial.html#tutorial">Node.js App with N4JS Tutorial</a>
</td>
<td class="hdlist2">
<p>Begin using the more powerful features N4JS has to offer!</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_chess_tutorial"><a class="link" href="#_chess_tutorial">Chess Game App with N4JS Tutorial</a></h3>
<div class="paragraph">
<p>In this tutorial, we will develop a simple and yet fun (!) web-based chess game with N4JS and React. The final result of the tutorial is a chess game that allows two humans to play against each other.</p>
</div>
<div class="hdlist">
<table>
<tr>
<td class="hdlist1">
<a href="n4js-tutorial-chess/n4js-tutorial-chess.html">Chess game tutorial (part 1)</a>
</td>
<td class="hdlist2">
<p>Begin developing web apps with N4JS and React!</p>
</td>
</tr>
<tr>
<td class="hdlist1">
<a href="n4js-tutorial-chess/n4js-tutorial-chess-redux.html">Chess game tutorial (part 2)</a>
</td>
<td class="hdlist2">
<p>Use Redux to manage chess game state with Redux and test game logics with our test framework Mangelhaft</p>
</td>
</tr>
</table>
</div>
<hr>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_specifications"><a class="link" href="#_specification">Specifications</a></h2>
<div class="sectionbody">
<h3 id="_n4js_language_specification"><a class="link" href="#_n4js_language_specification">N4JS Language Specification</a></h3>
<div class="paragraph">
<p>For a complete reference of the N4JS Language, the Specification is available at the following location:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="../spec/index.html">N4JS Language Specification</a></p>
</li>
</ul>
This is an HTML version of the asciidoc based documentation <a href="https://github.com/eclipse/n4js/tree/master/docs/org.eclipse.n4js.spec">on Github</a>.
The language specification is also available in the Eclipse help of the N4JS IDE itself.
</div>
<h3 id="_n4js_ide_specification"><a class="link" href="#_n4js_ide_specification">N4JS IDE Specification</a></h3>
<div class="paragraph">
<p>For a reference of the N4JS IDE, i.e. the specific views and UI features of the Eclipse based IDE, the Specification is available at the following location:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="../idespec/index.html">N4JS IDE Specification</a></p>
</li>
</ul>
This is an HTML version of the asciidoc based documentation <a href="https://github.com/eclipse/n4js/tree/master/docs/org.eclipse.n4js.ide.spec">on GitHub</a>.
The IDE specification is also available in the Eclipse help of the N4JS IDE itself.
</div>
<h3 id="_n4js_design"><a class="link" href="#_n4js_design">N4JS Design Documentation</a></h3>
<div class="paragraph">
<p>The design and other internal information valuable for contributors to Eclipse N4JS can be found at the following location:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="../design/index.html">N4JS Design Documentation</a></p>
</li>
</ul>
This is an HTML version of the asciidoc based documentation <a href="https://github.com/eclipse/n4js/tree/master/docs/org.eclipse.n4js.design">on GitHub</a>.
</div>
</div>
</div>
<hr>
<div class="sect1">
<h2 id="_release_notes"><a class="link" href="#_release_notes">Release Notes</a></h2>
<div class="sectionbody">
<div class="paragraph">
<p>Information on the current state of the N4JS Language and IDE including details of known issues and upcoming features that are under development.</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="../releases/index.html">Eclipse N4JS Release Notes</a></p>
</li>
</ul>
</div>
<div class="sect2">
<h3 id="_copyright_information"><a class="link" href="#_copyright_information">Copyright Information</a></h3>
<div class="ulist">
<ul>
<li>
<p><a href="license.html#license">License</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
</div>
</div>
<div class="Grid social" style="color:#d5dfea">
<div class="Cell Cell--2-12 m-Cell--withMargin">
<h2>Quick Links</h2>
<ul>
<li><a href="../downloads.html">Download</a></li>
<li><a href="index.html">Documentation</a></li>
<li><a href="https://github.com/eclipse/n4js/">Source</a></li>
<li><a href="https://github.com/eclipse/n4js/issues">Issues</a></li>
</ul>
</div>
<div class="Cell Cell--2-12 m-Cell--withMargin">
<br/><br/>
<ul>
<li><a href="https://www.eclipse.org/forums/index.php/f/365/">Forum</a></li>
<li><a href="http://n4js.blogspot.de/">Blog</a></li>
<li><a href="https://dev.eclipse.org/mailman/listinfo/n4js-dev">Mailing List</a></li>
<li><a href="https://projects.eclipse.org/projects/technology.n4js">Eclipse Project Page</a></li>
<li><a href="https://twitter.com/n4jsdev">Tweets by n4jsdev</a></li>
</ul>
</div>
<div class="Cell Cell--2-12 m-Cell--withMargin">
<br/><br/>
<ul>
<li><a href="http://www.eclipse.org/">Eclipse Home</a></li>
<li><a href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a></li>
<li><a href="http://www.eclipse.org/legal/termsofuse.php">Terms of Use</a></li>
<li><a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a></li>
<li><a href="http://www.eclipse.org/legal/">Legal</a></li>
</ul>
</div>
<div style="clear: both; height: 0; overflow: hidden;"></div>
</div>
<script>
// Toggle the table of contents
$( "button#tocbutton" ).click(function() {
if ($("#tocbutton").css('right') == '25px') {
$( "#tocbutton" ).animate({right: '215px'},"slow");
$( "#toc.toc2" ).animate({right: '0'},"slow");
}
else {
$( "#tocbutton" ).animate({right: '25px'},"slow");
$( "#toc.toc2" ).animate({right: '-13rem'},"slow");
}
});
</script>
<script type="text/javascript">
// Create a back to top button
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top, a.simple-back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
</body>
</html>