Guía paso a paso para crear una Isomorphic app con React, Express y ES6 Seguramente te estarás preguntando qué será eso de Isomorphic app. Dicho término no es más que un concepto que describe que el código JavaScript que normalmente ejecutamos en el cliente (Browser) también puede correr en el servidor (Node). Por ejemplo, nuestros componentes de React también pueden ser renderizados en el Backend. Esto abre un abanico de posibilidades que podrás ya estar evidenciando, y de las que muy probablemente trataremos a lo largo de este tutorial. Últimamente suele hablarse mucho acerca de cómo las Single Page Applications(SPA) contribuyen al mejoramiento de la interacción con el usuario; en comparación a como se venía haciendo con el desarrollo tradicional de una app. ¿Existirá alguna alternativa para encontrar el equilibrio y brindar una excelente UX sin que nos afecte el posicionamiento? Para seguir el tutorial paso a paso, implementaremos una metodología Git. Para este ejemplo crearemos un Pokedex, el cual puedes ver en funcionamiento ya mismo aquí.
Create a Multi-user Presentation with Reveal.js Creating impressive presentation is an art. For a long time PowerPoint stood alone as the de facto tool for creating presentations. Now, things have changed, as the web has become the focal point for all businesses, and as browser capabilities improved tremendously. Modern browsers are now capable of rendering 3-D graphics and animations just like in any other native applications. Then there came some cool presentation libraries based on HTML5 and CSS3. Reveal.js is a highly popular library for creating stunning presentations. Websockets is a new standard defined as a part of HTML5 spec, which enables bi-directional, full-duplex communication in browsers. In this article we’ll discuss how to create a Reveal.js presentation that can be controlled by multiple users. Prerequisites This article assumes that you have installed and can use the following libraries: Node.jsYeomanGruntBower Initial steps First we’ll set up an express.js server. This will install the express-generator in global scope.
How to Use ES6 for Universal JavaScript Apps — JavaScript Scene The ES6 love is in the `env` and `ecmaFeatures` keys. You’ll need those to prevent errors when ESLint encounters your ES6-specific code. If you also want object rest & spread (an ES7 proposal commonly used in React code), you’ll also need `babel-eslint`. Compiling For most cases, you can simply replace your `node` calls with `babel-node` calls. Babel’s docs make compiling look like a breeze: $ babel script.js --out-file script-compiled.js Couldn’t be easier, right? $ babel -d build-dir source-dir Note that the output directory comes first. If you want the debugger to work properly, you will want to add source maps with the `-s` option: $ babel -d build-dir source-dir -s Doing so will tell Babel that for each file it compiles, it should also produce a source map file that will tell debuggers where to find the original source code while you’re stepping through the live code in the engine. To compile for the browser, you want to use Webpack, or the Babelify Browserify transform. Compile a bundle:
Top 10 ES6 Features Every Busy JavaScript Developer Must Know I recently went to HTML5 Dev conference in San Francisco. Half of the talks I went to were about ES6 or, as it’s now called officially, ECMAScript2015. I prefer the more succinct ES6 though. This essay will give you a quick introduction to ES6. If you don’t know what is ES6, it’s a new JavaScript implementation. Here’s the list of the top 10 best ES6 features for a busy software engineer (in no particular order): Default Parameters in ES6Template Literals in ES6Multi-line Strings in ES6Destructuring Assignment in ES6Enhanced Object Literals in ES6Arrow Functions in ES6Promises in ES6Block-Scoped Constructs Let and ConstClasses in ES6Modules in ES6 Disclaimer: the list if highly biased and subjective. [Sidenote] Reading blog posts is good, but watching video courses is even better because they are more engaging. A lot of developers complained that there is a lack of affordable quality video material on Node. Go check out Node University which has FREE videos courses on Node: node.university.
Object-Oriented JavaScript — A Deep Dive into ES6 Classes Often we need to represent an idea or concept in our programs — maybe a car engine, a computer file, a router, or a temperature reading. Representing these concepts directly in code comes in two parts: data to represent the state, and functions to represent the behavior. ES6 classes give us a convenient syntax for defining the state and behavior of objects that will represent our concepts. ES6 classes make our code safer by guaranteeing that an initialization function will be called, and they make it easier to define a fixed set of functions that operate on that data and maintain valid state. Consider this non-class code. The date today isn’t valid: there’s no month 24. Here’s the corrected version that uses classes. class SimpleDate { constructor(year, month, day) { this. JARGON TIP:When a function is associated with a class or object, we call it a When an object is created from a class, that object is said to be an Constructors Keep Data Private Privacy with Conventions Privacy with Symbols
Learn ES2015 · Babel es6features This document was originally taken from Luke Hoban's excellent es6features repo. Go give it a star on GitHub! REPL Be sure to try these features out in the online REPL. Introduction ECMAScript 2015 is an ECMAScript standard that was ratified in June 2015. See the ES2015 standard for full specification of the ECMAScript 2015 language. ECMAScript 2015 Features Arrows and Lexical This Arrows are a function shorthand using the => syntax. Classes ES2015 classes are a simple sugar over the prototype-based OO pattern. class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { super(geometry, materials); this.idMatrix = SkinnedMesh.defaultMatrix(); this.bones = []; this.boneMatrices = []; //... } update(camera) { //... super.update(); } static defaultMatrix() { return new THREE.Matrix4(); }} Enhanced Object Literals Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls.
What is PhantomJS and How is it Used? PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. The above definition may be ambiguous, in simple terms, PhantomJS is a web browser without a graphical user interface. In simple terms, PhantomJS is a web browser without a graphical user interface This then begs the question, What use is a browser without a GUI? # Installing PhantomJS Before we learn more about PhantomJS, first you need to install it on your computer. After downloading the binary, you need to add the executable to PATH environment variable. # PhantomJS Core Concepts Since PhantomJS is not usable when it comes to surfing the web, it has a whole set of features that developers love and use for many purposes. Screen capturePage automationNetwork monitoringTestingAnd more... Screen Capture PhantomJS can be used to take screenshots of websites, those screenshots can be rendered in different formats also.
Understanding JavaScript Promises, Pt. I: Background & Basics Free Course Build Your First Node.js Website Node is a powerful tool to get JavaScript on the server. Use Node to build a great website. # The Promised Land Native Promises are amongst the biggest changes ES2015 make to the JavaScript landscape. Promises feature a fairly simple API, but come with a bit of a learning curve. By the end of this article, you'll be able to: Articulate why we have promises, and what problems they solve;Explain what promises are, from the perspective both of their implementation and their usage; andReimplement common callback patterns using promises. Oh, one note. Just clone it down and checkout the Part_1 branch: git clone git checkout Part_1-Basics . . . The Problem with CallbacksPromises: Definitions w/ Notes from the A+ SpecPromises & Un-inversion of ControlControl Flow with Promises Grokking then, reject, & resolve # Asynchronicity Sync & Async Synchronous code runs before any code that follows it. The Challenge of Asynchronicity