Category Archives: AngularJs

Comparing The Top Frameworks For Building Hybrid Mobile Apps

By Danny Markov

comparing-the-top-frameworks

Only a few years ago, developing mobile apps via JavaScript was nothing more then a quirky experiment. The idea that you could build iOS and Android apps, without having to operate with Java and Objective C, seemed appealing to many web devs. Now we have a plethora of frameworks bringing us closer than ever to creating a native mobile experience using only web technologies.

What are Hybrid Mobile Apps?

A hybrid app is just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is displayed in a webview (this is a basically a stripped down web browser). The advantage is that you only need to write a single application, which in most cases runs unmodified on Android, iOS and Windows Phone. Most of the frameworks listed in this article do this using Cordova or PhoneGap, which give you a bridge to the device APIs in JavaScript.

In this article we’re going to compare the most popular JavaScript frameworks for building hybrid and native mobile apps. Scroll to the bottom of the article to see the scores.

1. Ionic

Ionic

Ionic is the most popular framework on our list and probably the first choice of many developers. You can use the CSS portion of the framework to create native looking designs, but to harness the full potential of Ionic, it’s best to pair it with AngularJS. A big bonus you get with Ionic is the command-line interface which is full of awesome features including integrated emulators and a Cordova based app packager.

Pros:

  • Works with predefined components
  • Great community
  • Command Line Interface with lots of useful features

Cons:

  • You need to know AngularJS to do anything complex

2. Onsen UI

Onsen UI

Onsen UI

This is an open source framework that allows developers to build apps by combining native-looking components. It’s fairly simple to use, can work with or without AngularJS, and has great documentation that includes lots of examples and layouts for the most common app structures. A disadvantage of Onsen UI is that it currently offers only an iOS theme, although the next version promises Material Design support.

Pros:

  • Works with predefined components
  • Excellent documentation with examples

Cons:

  • PhoneGap/Cordova builder not included, but supported
  • No support for Material Design (yet)

3. Framework 7

Framework 7

Framework 7

The cool thing about Framework 7 is that it is completely framework agnostic (doesn’t have external dependencies like Angular or React) and still manages to make apps look and feel native, with properly styled components and animations. Anyone who understands HTML, CSS and JavaScript can create an app without making the code convoluted. Framework 7 doesn’t include any tools for emulation or app packaging so you will need to combine it with Cordova or PhoneGap.

Pros:

  • Simple to use, relies only on HTML, CSS and JavaScript
  • Good performance
  • Can be combined with any JavaScript framework of choice

Cons:

  • PhoneGap/Cordova builder not included, but supported

4. React Native

React Native

React Native

As the name implies, React Native’s purpose is to build proper native apps, instead of creating hybrid ones that run in a Webview. Development, however, is still done completely via JavaScript and React. This frameworks isn’t tailored towards beginners in web development, but on the plus side, there is a huge community behind it that will help you in every part of the way. Recently the framework rolled support for Android, so you can have real cross-platform apps.

Pros:

  • Native-like performance
  • Huge community

Cons:

  • Steep learning curve
  • The development tools only work on OS X at the moment

5. jQuery Mobile

jQuery Mobile

jQuery Mobile

The grandpa of all mobile frameworks, jQuery Mobile doesn’t try to make apps that look like Android or iOS. Instead, it’s purpose is to help develop web apps that will work equally well on all mobile browsers (including oldies such as Windows Phone, Blackberry, and Symbian). As such, it is very lightweight, depends only on jQuery and is quite easy to learn, while still offering good touch recognition and PhoneGap/Cordova support.

Pros:

  • Support for wide range of mobile browsers
  • Simple to use

Cons:

  • Dated styles that don’t resemble either iOS or Android
  • PhoneGap/Cordova builder not included, but supported

6. Native Script

NativeScript

NativeScript

Native script’s biggest feature is that it allows you to write the functionality of your app in JavaScript once, which then will be transformed accordingly to Android, iOS and Windows Phone. Packaged, the compiled applications start in a native fashion, without opening and running in a browser. This frameworks does require some coding skills, but compensates for it with an extensive, in-depth documentation.

Pros:

  • Write once, use everywhere approach.
  • Great documentation

Cons:

  • Steep learning curve
  • Small community

7. Famous

Famous

Famous

Famous has a unique approach to web and mobile development. It combines the DOM tree (your HTML) with WebGL, displaying everything in a canvas, similar to what HTML game engines do. This novel technique allows the framework to run your apps in 60 fps, which is as smooth as most native apps. Sadly, this project is no longer being actively developed and doesn’t have good docs for reference.

Pros:

  • Native-like performance

Cons:

  • No longer actively developed
  • Documentation not full
  • Small community

The Rundown

Conclusion

There is no best framework – all of them have their pros and cons and it’s up to you to decide depending on what you plan on using them for.

We hope this quick comparison has been of great use to you! If you have experience with any of the listed frameworks or similar ones, please leave a comment and share your opinion on hybrid app development!

Source:: Tutorialzine.com

The Languages And Frameworks You Should Learn In 2016

By Martin Angelov

the-languages-and-frameworks-you-should-learn-in-2016

A lot happened in the software development world in 2015. There were new releases of popular programming languages, new versions of important frameworks and new tools. You will find a short list of the new releases that we think are the most important below, together with suggestions for the things we believe would be a great investment of your time to learn in 2016.

The Trends

Shift from the backend to the frontend

In the last few years, there has been a trend towards shifting the business logic of web apps from the backend to the frontend, with the backend being delegated to a simple API. This makes the choice of a frontend framework that much more important.

Quick browsers releases

Another significant advancement for the web as a platform in 2015 was the release of the Edge web browser. This is the successor of Internet Explorer which has an updated interface and faster performance. What sets it apart from IE is that it adopts the same quick release schedule that Firefox and Chrome follow. This is going to move the JavaScript community forward as updates to JavaScript and web standards will be available in weeks rather than years everywhere.

The death of Flash

It has finally happened! YouTube switched to HTML5 this year, ditching their legacy Flash player. Firefox started blocking the Flash plugin by default. Even the powerful Adobe Flash creation suite was renamed to Adobe Animate and defaults to HTML5 exports. This leaves the doors wide open for the web platform to shine.


Languages and Platforms

Python 3.5 was released this year with a lot of new features like Asyncio, which gives you a node.js-like event loop, and type hints. As a whole Python 3 is finally gaining popularity and we heavily recommend it over the older Python 2. Nearly all libraries are available for Python 3 and now is a good time to upgrade your legacy code base.

PHP 7 is a major new version that fixes a number of issues and brings new features and speed (see an overview here). PHP 7 is around twice as fast as PHP 5.6, which will have a big impact on large codebases and CMS systems like WordPress and Drupal. We recommend PHP The Right Way, which was updated for version 7. And if you need even more speed and don’t mind switching to an alternative runtime, check out HHVM, which Facebook uses and develops to run their website.

JavaScript also saw updates in the form of the ES2015 standard (used to be known as ES6). It brings us exciting new features and additions to the language. Thanks to most browsers adopting quick release schedules, support for ES2015 is great, and there is Babel.js which will help you bring your code to older browsers.

Node.js saw a lot of changes this year, with the community splitting between Node.js and io.js, and then joining forces again. As a result we now have an actively maintained project with lots of contributors and two versions of Node – a solid LTS (long term support) release, which gives stability for long lived projects and large companies, and a non-lts version which is quick to add new JavaScript features.

Swift 2 was released earlier this year. This is Apple’s vision for a modern programming language that eases the development of apps on iOS and OS X. As of a few weeks ago, Swift is open source and has already been ported on Linux. This means that it is now possible to build backends and server side software with it.

Go 1.5 was released a few months ago, and brough major architectural changes. In 2015 it has grown in popularity and has been adopted in leading startups and open source projects. The language itself is relatively simple, so learning it will be a weekend well spent.

TypeScript is a staticly typed language which compiles to JavaScript. It is developed by Microsoft and has perfect integration with Visual Studio and the open source Visual Studio Code editors. It will soon be quite popular, as the upcoming Angular 2 is written in it. Static typing benefits large teams and large code bases the most, so if one of these applies to you, or you are just curious, you should give TypeScript a try.

For the adventurous, you can try out one the functional languages like Haskell or Clojure. There are also interesting high performance languages like Rust and Elixir. If you are looking for a programming job, career languages like Java (which has some nice features in its 8th version) and C# (which thanks to Visual Studio Code and .net core can be run and developed cross platform) would be a good investment of your time in 2016.

Learn one or more of these: Python 3, Go, PHP 7, ES2015, Node.js, Swift, TypeScript


javascript

JavaScript Frameworks

JavaScript is a very important piece of the web development stack, so we are giving it dedicated section in our overview. There were two new standards this year – Service Workers and Web Assembly, which shape how web apps are developed from now on. There were also a number of new framework releases which we think you should keep a close eye on in 2016:

Angular.js has become the go-to JavaScript framework for enterprises and large companies. It has been known for some time that the next major version of the framework was coming, and earlier this year Angular 2 was released as a development preview. It is a total rewrite of Angular 1 and according to us is a great improvement over it. It is almost guaranteed to become the enterprise framework of choice once it is released, and Angular 2 experience will be a great addition to your CV. Our advice is to wait a few months for the final version to ship before picking it up, but you can read through their quick start guide right now.

React continued its ascend throughout 2015 and has seen new releases throughout the year and new projects adopting it as their library of choice. It shipped new development tools a few months ago. Facebook also released React Native which is a framework for building mobile apps for Android and iOS, which combines a native frontend with React running in a background JavaScript thread. See a quick tutorial about React that we published this year.

Polymer 1.0 was released in May. This marks the first stable and production ready version. Polymer is based around Web Components, which is a standard for packaging HTML, JS and CSS into isolated widgets that can be imported into your web apps. Web Components are only supported in Chrome and Opera at the moment, but Polymer makes them available everywhere.

Ember.js also saw a new release. Ember 2 brings modularity and removes deprecated features and optimizes the codebase. Ember follows semantic versioning and maintainers of the framework are careful to make updating as easy as possible. If you need a framework with stability and easy migration to new versions, you can give Ember a try.

Vue.js is a new library that offers reactive components for building user interfaces. It supports data binding, modular components and composition. It is similar to React, but doesn’t use a virtual DOM and works only in the browser. In the short time that it has existed, Vue has gathered a very active community around it and is establishing itself as a pragmatic tool for building web interfaces.

Learn one of these: Angular 2, React, Ember.js, Vue.js, Polymer, Web Components, Service Workers


frontend

Frontend

Bootstrap has become even more popular in the last year and is turning into a web development standard. Version 4 will come out in the next few months, which brings flexbox support and integrates SASS. It promises a smooth transition from V3 (unlike what we saw with v2 to v3 a couple of years ago), so you can feel confident that what you learn about Bootstrap 3 will be applicable to version 4.

Foundation is another frontend framework that is an alternative to Bootstrap. Version 6 was released earlier this year, which focuses on modularity so that you can include only the pieces that you need for a faster load time.

MDL is an official framework by Google for building material design web apps. It was released earlier this year and has a similar goal to Google’s other framework – Polymer, but is much easier to get started with. We have a wonderful overview which compares MDL with Bootstrap.

CSS preprocessors continue improving. Less and SASS are the two most popular at the moment, with mostly comparable feature sets. However, the news that Bootstrap 4 is migrating over to SASS gives it a slight edge over Less as the preprocessor to learn in 2016. Also, there is the newer PostCSS tool that is gaining mind share, but we recommend it only for devs which already have experience with preprocessors.

Learn one or more of these: Bootstrap, MDL, Foundation, SASS, LESS, PostCSS


backend

Backend

There has been a clear trend in web development over the last few years. More and more of our apps’ logic is shifted to the frontend, and the backend is only treated as an API. However there is still room for classic HTML-generating web apps, which is why we think that learning a classic full stack framework is still important.

Depending on which language you prefer, you have plenty of choice. For PHP you have Symfony, Zend, Laravel (and Lumen, its new lightweight alternative for APIs), Slim and more. For Python – Django and Flask. For Ruby – Rails and Sinatra. For Java – Play and Spark. For Node.js you have Express, Hapi and Sails.js, and for Go you have Revel.

AWS Lambda was released last year, but the concept is now established and ready for production. This is a service which eliminates backend servers entirely and is infinitely scaleable. You can define functions which are called on specific conditions or when routes of your API are visited. This means that you can have an entirely serverless backend which you don’t have to think about.

Another trend are static site generators like Jekyll and Octopress (see a complete list here). These tools take a number of source files like text and images, and create an entire website with prerendered HTML pages. Developers, who would normally set up a WordPress blog with a database and an admin area, now prefer to generate their HTML pages ahead of time and only upload a static version of their site. This has the benefits of increased security (no backend to hack and database to manage) and fantastic performance. Combined with CDNs like MaxCDN and CloudFlare clients can request a page of the website and receive it from a server nearby, greatly reducing latency.

Learn one of these: A full stack backend framework, AWS Lambda, A static site generator


cms

CMS

We’ve included two of the most popular CMS systems here. Both are written in PHP and are easy to deploy and get started with. They enjoy big speedups from the new PHP 7 release.

In recent years WordPress has become much more than a simple blogging platform. It is a fully fledged CMS/Framework with plugins that make it possible to run any kind of website. High quality WordPress themes are a big market, and lots of freelancers make their living by developing for WordPress. With projects like WP-API you can use WordPress as a REST API backend.

Drupal 8 was released this year. It is a full rewrite that focuses on modern development practices. It makes use of Symfony 2 components and Composer packages and the Twig templating engine. Millions of websites run Drupal, and it is a good choice for content heavy portals.


databases

Databases

This year the web development community lost some of its enthusiasm for NoSQL databases, and instead returned to relational databases like Postgres and MySQL. Notable exceptions to this trend are RethinkDB and Redis which gained mind share, and we recommend that you try them out in 2016.

Postgres is a popular relational database engine which sees a lot of development activity and is constantly improved with new features. Version 9.5 is expected soon. It will bring better support for JSONB columns for holding schema-less data (replacing any need for a separate NoSQL database) and the long awaited upsert operation, which simplifies INSERT-or-UPDATE queries. You might want to look into it, once it is released in 2016.

MySQL is the the most popular open source database system and is installed on most hosting providers out there. With version 5.7, MySQL also offers JSON columns for storing schema-less data. If you are just starting out with backend development, you will most likely be looking at connecting to a MySQL database that your hosting provider has set up for you. It is probably going to be an older version, so you might not be able to try out the JSON type. MySQL is included in popular packages like XAMPP and MAMP so it is easy to get started with.

Learn one of these: Redis, RethinkDB, MySQL/MariaDB, PostgreSQL


mobile-apps

Mobile Apps

Mobile platforms are always evolving and smartphone hardware now rivals low end laptops in performance. This is great news for hybrid mobile frameworks, as mobile apps built using web technologies can now offer a smooth, native-like experience.

We have a nice overview of hybrid mobile frameworks that you might want to check out. You have the popular Ionic framework and Meteor which recently had its 1.0 version and is also suitable for mobile app development. Facebook launched React Native, which runs React components in a background JavaScript thread and updates a native UI, allowing you to have mostly identical code for both iOS and Android.

Learn one of these: Ionic, React Native, Meteor


editors-and-tools

Editors and Tools

The Atom editor reached version 1.0 this year. It is a free and powerful code editor that is built using web technologies. It has lots of packages available for it and a large community. It offers smart autocompletion and integrates with plugins for code refactoring and linting. Not to mention that it has lots of beautiful themes to chose from, and you can customize it by writing CoffeeScript and CSS. Facebook has used this extensibility and launched the Nuclide editor.

Microsoft surprised everybody when they released their Visual Studio Code editor earlier this year. It is a lightweight IDE that supports a number of languages and runs on Windows, Linux and OS X. It offers the powerful IntelliSense code inspection feature and integrates a debugger for ASP.Net and Node.js.

NPM, the package manager of Node.js, has exploded in popularity and has become the packaging standard for frontend and node developers. This is the easiest way to manage the JavaScript dependencies for your project and getting started with it is easy.

Even for a solo developer Git is a necessity these days. Its serverless model allows you to turn any folder into a version controlled repository, which you can then push to Bitbucket or Github, and sync across computers. If you haven’t used Git yet, we recommend that you add it to your list of things to learn in 2016.

Learn one of these: Atom, Visual Studio Code, NPM, Git


making-things

Making Things

The Raspberry PI foundation delivered an early Christmas present this year, with the release of the Raspberry PI Zero – a $5 computer that is fast and power efficient. It runs Linux, so you can turn it into a server, a home automation device, a smart mirror, or to embed it into a dumb appliance and create that internet enabled coffee brewer you’ve been dreaming of. 2016 is the year to get a Raspberry.


Onto An Awesome 2016!

We’ve had a great 2015 and by the looks of it 2016 is going to be even more awesome. What’s on your list of things to learn in 2016?

Source:: Tutorialzine.com

The Languages And Frameworks You Should Learn In 2016

By Martin Angelov

the-languages-and-frameworks-you-should-learn-in-2016

A lot happened in the software development world in 2015. There were new releases of popular programming languages, new versions of important frameworks and new tools. You will find a short list of the new releases that we think are most important below.

The Trends

In the last few years, there has been a trend towards shifting the business logic of web apps from the backend to the frontend, with the backend being delegated to a simple API. This makes the choice of a frontend framework that much more important.

Another significant advancement for the web as a platform in 2015 was the release of the Edge web browser. This is the successor of Internet Explorer which has an updated interface and faster performance. What sets it apart from IE is that it adopts the same quick release schedule that Firefox and Chrome follow. This is going to move the JavaScript community forward as updates to JavaScript and web standards will be available in weeks rather than years everywhere.


Languages and Platforms

Python 3.5 was released this year with a lot of new features like Asyncio, which gives you a node.js-like event loop, and type hints. As a whole Python 3 is finally gaining popularity and we heavily recommend it over the older Python 2. Nearly all libraries are available for Python 3 and now is a good time to upgrade your legacy code base.

PHP 7 is a major new version that fixes a number of issues and brings new features and speed (see an overview here). PHP 7 is around twice as fast as PHP 5.6, which will have a big impact on large codebases and CMS systems like WordPress and Drupal. We recommend PHP The Right Way, which was updated for version 7. And if you need even more speed and don’t mind switching to an alternative runtime, check out HHVM, which Facebook uses and develops to run their website.

JavaScript also saw updates in the form of the ES2015 standard (used to be known as ES6). It brings us exciting new features and additions to the language. Thanks to most browsers adopting quick release schedules, support for ES2015 is great, and there is Babel.js which will help you bring your code to older browsers.

Node.js saw a lot of changes this year, with the community splitting between Node.js and io.js, and then joining forces again. As a result we now have an actively maintained project with lots of contributors and two versions of Node – a solid LTS (long term support) release, which gives stability for long lived projects and large companies, and a non-lts version which is quick to add new JavaScript features.

Swift 2 was released earlier this year. This is Apple’s vision for a modern programming language that eases the development of apps on iOS and OS X. As of a few weeks ago, Swift is open source and has already been ported on Linux. This means that it is now possible to build backends and server side software with it.

Go 1.5 was released a few months ago, and brough major architectural changes. In 2015 it has grown in popularity and has been adopted in leading startups and open source projects. The language itself is relatively simple, so learning it will be a weekend well spent.

TypeScript is a staticly typed language which compiles to JavaScript. It is developed by Microsoft and has perfect integration with Visual Studio and the open source Visual Studio Code editors. It will soon be quite popular, as the upcoming Angular 2 is written in it. Static typing benefits large teams and large code bases the most, so if one of these applies to you, or you are just curious, you should give TypeScript a try.

For the adventurous, you can try out one the functional languages like Haskell or Clojure. There are also interesting high performance languages like Rust and Elixir. If you are looking for a programming job, career languages like Java (which has some nice features in its 8th version) and C# (which thanks to Visual Studio Code and .net core can be run and developed cross platform) would be a good investment of your time in 2016.

Learn one or more of these: Python 3, Go, PHP 7, ES2015, Node.js, Swift, TypeScript


javascript

JavaScript Frameworks

JavaScript is a very important piece of the web development stack, so we are giving it dedicated section in our overview. There were two new standards this year – Service Workers and Web Assembly, which shape how web apps are developed from now on. There were also a number of new framework releases which we think you should keep a close eye on in 2016:

Angular.js has become the go-to JavaScript framework for enterprises and large companies. It has been known for some time that the next major version of the framework was coming, and earlier this year Angular 2 was released as a development preview. It is a total rewrite of Angular 1 and according to us is a great improvement over it. It is almost guaranteed to become the enterprise framework of choice once it is released, and Angular 2 experience will be a great addition to your CV. Our advice is to wait a few months for the final version to ship before picking it up, but you can read through their quick start guide right now.

React continued its ascend throughout 2015 and has seen new releases throughout the year and new projects adopting it as their framework of choice. It shipped new development tools a few months ago. Facebook also released React Native which is a framework for building mobile apps for Android and iOS, which combines a native frontend with React running in a background JavaScript thread. See a quick tutorial about React that we published this year.

Polymer 1.0 was released in May. This marks the first stable and production ready version. Polymer is based around Web Components, which is a standard for packaging HTML, JS and CSS into isolated widgets that can be imported into your web apps. Web Components are only supported in Chrome and Opera at the moment, but Polymer makes them available everywhere.

Ember.js also saw a new release. Ember 2 brings modularity and removes deprecated features and optimizes the codebase. Ember follows semantic versioning and maintainers of the framework are careful to make updating as easy as possible. If you need a framework with stability and easy migration to new versions, you can give Ember a try.

Learn one of these: Angular 2, React, Ember.js, Polymer, Web Components, Service Workers


frontend

Frontend

Bootstrap has become even more popular in the last year and is turning into a web development standard. Version 4 will come out in the next few months, which brings flexbox support and integrates SASS. It promises a smooth transition from V3 (unlike what we saw with v2 to v3 a couple of years ago), so you can feel confident that what you learn about Bootstrap 3 will be applicable to version 4.

Foundation is another frontend framework that is an alternative to Bootstrap. Version 6 was released earlier this year, which focuses on modularity so that you can include only the pieces that you need for a faster load time.

MDL is an official framework by Google for building material design web apps. It was released earlier this year and has a similar goal to Google’s other framework – Polymer, but is much easier to get started with. We have a wonderful overview which compares MDL with Bootstrap.

CSS preprocessors continue improving. Less and SASS are the two most popular at the moment, with mostly comparable feature sets. However, the news that Bootstrap 4 is migrating over to SASS gives it a slight edge over Less as the preprocessor to learn in 2016. Also, there is the newer PostCSS tool that is gaining mind share, but we recommend it only for devs which already have experience with preprocessors.

Learn one or more of these: Bootstrap, MDL, Foundation, SASS, LESS, PostCSS


backend

Backend

There has been a clear trend in web development over the last few years. More and more of our apps’ logic is shifted to the frontend, and the backend is only treated as an API. However there is still room for classic HTML-generating web apps, which is why we think that learning a classic full stack framework is still important.

Depending on which language you prefer, you have plenty of choice. For PHP you have Symfony, Zend, Laravel (and Lumen, its new lightweight alternative for APIs), Slim and more. For Python – Django and Flask. For Ruby – Rails and Sinatra. For Java – Play and Spark. For Node.js you have Express, Hapi and Sails.js, and for Go you have Revel.

AWS Lambda was released last year, but the concept is now established and ready for production. This is a service which eliminates backend servers entirely and is infinitely scaleable. You can define functions which are called on specific conditions or when routes of your API are visited. This means that you can have an entirely serverless backend which you don’t have to think about.

Another trend are static site generators like Jekyll and Octopress (see a complete list here). These tools take a number of source files like text and images, and create an entire website with prerendered HTML pages. Developers, who would normally set up a WordPress blog with a database and an admin area, now prefer to generate their HTML pages ahead of time and only upload a static version of their site. This has the benefits of increased security (no backend to hack and database to manage) and fantastic performance. Combined with CDNs like MaxCDN and CloudFlare clients can request a page of the website and receive it from a server nearby, greatly reducing latency.

Learn one of these: A full stack backend framework, AWS Lambda, A static site generator


cms

CMS

We’ve included two of the most popular CMS systems here. Both are written in PHP and are easy to deploy and get started with. They enjoy big speedups from the new PHP 7 release.

In recent years WordPress has become much more than a simple blogging platform. It is a fully fledged CMS/Framework with plugins that make it possible to run any kind of website. High quality WordPress themes are a big market, and lots of freelancers make their living by developing for WordPress. With projects like WP-API you can use WordPress as a REST API backend.

Drupal 8 was released this year. It is a full rewrite that focuses on modern development practices. It makes use of Symfony 2 components and Composer packages and the Twig templating engine. Millions of websites run Drupal, and it is a good choice for content heavy portals.


databases

Databases

This year the web development community lost some of its enthusiasm for NoSQL databases, and instead returned to relational databases like Postgres and MySQL. Notable exceptions to this trend are RethinkDB and Redis which gained mind share, and we recommend that you try them out in 2016.

Postgres is a popular relational database engine which sees a lot of development activity and is constantly improved with new features. Version 9.5 is expected soon. It will bring better support for JSONB columns for holding schema-less data (replacing any need for a separate NoSQL database) and the long awaited upsert operation, which simplifies INSERT-or-UPDATE queries. You might want to look into it, once it is released in 2016.

MySQL is the the most popular open source database system and is installed on most hosting providers out there. With version 5.7, MySQL also offers JSON columns for storing schema-less data. If you are just starting out with backend development, you will most likely be looking at connecting to a MySQL database that your hosting provider has set up for you. It is probably going to be an older version, so you might not be able to try out the JSON type. MySQL is included in popular packages like XAMPP and MAMP so it is easy to get started with.

Learn one of these: Redis, RethinkDB, MySQL/MariaDB, PostgreSQL


mobile-apps

Mobile Apps

Mobile platforms are always evolving and smartphone hardware now rivals low end laptops in performance. This is great news for hybrid mobile frameworks, as mobile apps built using web technologies can now offer a smooth, native-like experience.

We have a nice overview of hybrid mobile frameworks that you might want to check out. You have the popular Ionic framework and Meteor which recently had its 1.0 version and is also suitable for mobile app development. Facebook launched React Native, which runs React components in a background JavaScript thread and updates a native UI, allowing you to have mostly identical code for both iOS and Android.

Learn one of these: Ionic, React Native, Meteor


editors-and-tools

Editors and Tools

The Atom editor reached version 1.0 this year. It is a free and powerful code editor that is built using web technologies. It has lots of packages available for it and a large community. It offers smart autocompletion and integrates with plugins for code refactoring and linting. Not to mention that it has lots of beautiful themes to chose from, and you can customize it by writing CoffeeScript and CSS. Facebook has used this extensibility and launched the Nuclide editor.

Microsoft surprised everybody when they released their Visual Studio Code editor earlier this year. It is a lightweight IDE that supports a number of languages and runs on Windows, Linux and OS X. It offers the powerful IntelliSense code inspection feature and integrates a debugger for ASP.Net and Node.js.

NPM, the package manager of Node.js, has exploded in popularity and has become the packaging standard for frontend and node developers. This is the easiest way to manage the JavaScript dependencies for your project and getting started with it is easy.

Even for a solo developer Git is a necessity these days. Its serverless model allows you to turn any folder into a version controlled repository, which you can then push to Bitbucket or Github, and sync across computers. If you haven’t used Git yet, we recommend that you add it to your list of things to learn in 2016.

Learn one of these: Atom, Visual Studio Code, NPM, Git


making-things

Making Things

The Raspberry PI foundation delivered an early Christmas present this year, with the release of the Raspberry PI Zero – a $5 computer that is fast and power efficient. It runs Linux, so you can turn it into a server, a home automation device, a smart mirror, or to embed it into a dumb appliance and create that internet enabled coffee brewer you’ve been dreaming of. 2016 is the year to get a Raspberry.


Onto An Awesome 2016!

We’ve had a great 2015 and by the looks of it 2016 is going to be even more awesome. What’s on your list of things to learn in 2016?

Source:: Tutorialzine.com

Comparing The Top Frameworks For Building Hybrid Mobile Apps

By Danny Markov

comparing-the-top-frameworks

Only a few years ago, developing mobile apps via JavaScript was nothing more then a quirky experiment. The idea that you could build iOS and Android apps, without having to operate with Java and Objective C, seemed appealing to many web devs. Now we have a plethora of frameworks bringing us closer than ever to creating a native mobile experience using only web technologies.

What are Hybrid Mobile Apps?

A hybrid app is just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is displayed in a webview (this is a basically a stripped down web browser). The advantage is that you only need to write a single application, which in most cases runs unmodified on Android, iOS and Windows Phone. Most of the frameworks listed in this article do this using Cordova or PhoneGap, which give you a bridge to the device APIs in JavaScript.

In this article we’re going to compare the most popular JavaScript frameworks for building hybrid and native mobile apps. Scroll to the bottom of the article to see the scores.

1. Ionic

Ionic

Ionic is the most popular framework on our list and probably the first choice of many developers. You can use the CSS portion of the framework to create native looking designs, but to harness the full potential of Ionic, it’s best to pair it with AngularJS. A big bonus you get with Ionic is the command-line interface which is full of awesome features including integrated emulators and a Cordova based app packager.

Pros:

  • Works with predefined components
  • Great community
  • Command Line Interface with lots of useful features

Cons:

  • You need to know AngularJS to do anything complex

2. Onsen UI

Onsen UI

Onsen UI

This is an open source framework that allows developers to build apps by combining native-looking components. It’s fairly simple to use, can work with or without AngularJS, and has great documentation that includes lots of examples and layouts for the most common app structures. A disadvantage of Onsen UI is that it currently offers only an iOS theme, although the next version promises Material Design support.

Pros:

  • Works with predefined components
  • Excellent documentation with examples

Cons:

  • PhoneGap/Cordova builder not included, but supported
  • No support for Material Design (yet)

3. Framework 7

Framework 7

Framework 7

The cool thing about Framework 7 is that it is completely framework agnostic (doesn’t have external dependencies like Angular or React) and still manages to make apps look and feel native, with properly styled components and animations. Anyone who understands HTML, CSS and JavaScript can create an app without making the code convoluted. Framework 7 doesn’t include any tools for emulation or app packaging so you will need to combine it with Cordova or PhoneGap.

Pros:

  • Simple to use, relies only on HTML, CSS and JavaScript
  • Good performance
  • Can be combined with any JavaScript framework of choice

Cons:

  • PhoneGap/Cordova builder not included, but supported

4. React Native

React Native

React Native

As the name implies, React Native’s purpose is to build proper native apps, instead of creating hybrid ones that run in a Webview. Development, however, is still done completely via JavaScript and React. This frameworks isn’t tailored towards beginners in web development, but on the plus side, there is a huge community behind it that will help you in every part of the way. Recently the framework rolled support for Android, so you can have real cross-platform apps.

Pros:

  • Native-like performance
  • Huge community

Cons:

  • Steep learning curve
  • The development tools only work on OS X at the moment

5. jQuery Mobile

jQuery Mobile

jQuery Mobile

The grandpa of all mobile frameworks, jQuery Mobile doesn’t try to make apps that look like Android or iOS. Instead, it’s purpose is to help develop web apps that will work equally well on all mobile browsers (including oldies such as Windows Phone, Blackberry, and Symbian). As such, it is very lightweight, depends only on jQuery and is quite easy to learn, while still offering good touch recognition and PhoneGap/Cordova support.

Pros:

  • Support for wide range of mobile browsers
  • Simple to use

Cons:

  • Dated styles that don’t resemble either iOS or Android
  • PhoneGap/Cordova builder not included, but supported

6. Native Script

NativeScript

NativeScript

Native script’s biggest feature is that it allows you to write the functionality of your app in TypeScript once, which then will be transformed accordingly to Android, iOS and Windows Phone. Packaged, the compiled applications start in a native fashion, without opening and running in a browser. This frameworks does require some coding skills, but compensates for it with an extensive, in-depth documentation.

Pros:

  • Write once, use everywhere approach.
  • Great documentation

Cons:

  • Steep learning curve
  • Small community

7. Famous

Famous

Famous

Famous has a unique approach to web and mobile development. It combines the DOM tree (your HTML) with WebGL, displaying everything in a canvas, similar to what HTML game engines do. This novel technique allows the framework to run your apps in 60 fps, which is as smooth as most native apps. Sadly, this project is no longer being actively developed and doesn’t have good docs for reference.

Pros:

  • Native-like performance

Cons:

  • No longer actively developed
  • Documentation not full
  • Small community

The Rundown

Conclusion

There is no best framework – all of them have their pros and cons and it’s up to you to decide depending on what you plan on using them for.

We hope this quick comparison has been of great use to you! If you have experience with any of the listed frameworks or similar ones, please leave a comment and share your opinion on hybrid app development!

Source:: Tutorialzine.com

What happened to Web Components?

By Axel Rauschmayer

Three years ago, there was a lot of excitement surrounding Web Components: everybody talked about them, the frameworks Ember and Angular planned to integrate them or even be based on them, etc.

By now, that excitement seems to have died down. This blog post examines what happened to Web Components. Spoiler: they are alive and well and slowly being adopted across browsers.

Refresher: Web Components

Web Components are a suite of specifications that help with implementing custom HTML elements:

  • Custom elements: an API for registering your own implementations for HTML elements.
  • Shadow DOM: Encapsulates and hides the innards of a custom element inside a nested document. The most important part of Web Components and hardest to polyfill.
  • Templates: enable you to store HTML templates inside an HTML document without interpreting their content (no loading of images etc.).
  • HTML Imports: let you import other HTML documents into the current one. That way, HTML documents become bundles of HTML, CSS and JavaScript. You need such bundles to distribute custom elements and all of their dependencies.

For more information on how Web Components work, you can read the introduction “Bringing componentization to the web: An overview of Web Components” by Travis Leithead and Arron Eicholz.

Status quo

For a long time, it was mainly Google (and, to some degree, Mozilla) that pushed Web Components. In recent months, other parties became more involved. There were two face-to-face meetings on 2015-04-24 and on 2015-07-21 that were attended by employees from Mozilla, Microsoft, Google, Apple and others. During those meetings, two Web Component specifications moved closer to a cross-browser consensus:

  • Shadow DOM: There is now broad agreement on how to standardize the Shadow DOM, which is great, because, as mentioned before, it is the spec that is most difficult to polyfill.

  • Custom elements: Everyone agrees that custom elements are important, but getting the details right is difficult, especially when to activate a custom implementation – while creating the custom element in the DOM or later.

HTML Imports are still controversial, because there is much overlap with ES6 module loading. Especially Mozilla and Microsoft argue that further work on HTML Imports should wait until ES6 module loading is finished.

More information:

Web Components versus React

When Sebastian Markbage (one of React’s creators) was asked about Web Components, he answered:

Sebastian: We’re not going to use it at all at Facebook. We’re not going to build React on it because there’s a strong model difference – imperative in Web Components to declarative in React. Web Components doesn’t have an idiomatic way to define things like where events go. How do you pass data when everything is a string? We see it more as an interop layer that lets various frameworks talk to each other.

In talking to the Atom team, this doesn’t solve different framework idioms as it doesn’t have an opinion on how they relate.

This sounds like React and Web Components are at odds with each other. However, in the talk “The complementarity of React and Web Components”, Andrew Rota disagrees:

  • Web Components can be used as leaves in the tree of React Components, instead of native DOM elements.

  • React is getting better at supporting Web Components:

    • Custom elements already work (elements with lowercase names are interpreted as DOM, replacing a whitelist of names).
    • Support for custom attributes and custom events is work in progress.
  • Andrew argues that Web Components should be:

    • Small: atomic, not compound. React and other frameworks can be used to assemble Web Components.
    • Completely encapsulated: For example, a Web Component should not put script tags into the surrounding document.
    • As stateless as possible: avoid internal state, use events to communicate changes.

      These rules for designing Web Components help React, but they make sense in general.

  • Using React inside a Web Component makes less sense, it goes against Web Components being as minimal as possible.

Further information

The Web Platform Podcast episode 54 (2015-07-28) asks a panel of experts: “Are Web Components Ready Yet?” (80min video). Watch that video to get more information and context on Web Components.

Mentioned in the podcast, the work of the CSS Houdini Group will help with implementing Web Components in the future:

The objective of the CSS-TAG [Technical Architecture Group] Houdini Task Force (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.

Styling and layouting are currently mostly black boxes. The Houdini Group plans to expose the internals of those boxes and to let you customize what is going on there.

Source:: 2ality

Comparing Bootstrap With Google’s New Material Design Lite

By Danny Markov

comparing-bootstrap-with-material-design-lite

Since Google announced Material Design with the introduction of Android 5.0, a large number of frontend frameworks emerged with the goal of bringing the concept to web apps. We had Mui, Material-UI, and even Google’s own Polymer framework. Some of the critiques against them is that they are difficult to use or don’t fully conform to the Material Design guidelines.

This is why, in the beginning of July, Google publicly released a new framework that is easy to use and has no additional dependencies. It’s called Material Design Lite (MDL for short), and it is aimed straight at the hugely popular Bootstrap framework. But which is better? Let’s find out.

Key Differences

Before we dive into the examples, let’s brake down the major differences between Bootstrap and Material Design Lite:

Philosophy

  • Bootstrap was originally built by Twitter with the purpose of making it easy to build responsive websites. It gives you a lot of components and customization options for making web apps.
  • Material Design Lite is a way for Google to spread its material design concept to the web. It gives you only the base building blocks for building material apps. The rest is up to the developer.

Development Experience

  • Bootstrap has a very detailed documentation. Development involves copy pasting from the examples and getting a usable result fast.
  • MDL is built around BEM, and components are built by combining multiple classes. This approach gives a great deal of control, but can sometimes lead to unwieldy HTML.

Components

  • In Bootstrap, almost all built-in HTML elements are styled and can fit nicely together in a layout. It gives you a great number of additional components for any type of design.
  • MDL gives you fewer components than Bootstrap, but they are all focused on building modern Material Design applications. They come with animations and beautiful default styles.

Layout

  • Bootstrap has an advanced grid system with offsets, column wrapping, hiding and reordering of columns.
  • MDL has a more primitive grid that gets the job done most of the time, but doesn’t support advanced features.

Design

  • Bootstrap gives you a passable default design which we have grown tired of by now, but there are plenty of wonderful themes to chose from.
  • MDL looks fresh and features bold colors and animations. It dictates exactly how your web app should look like and gives you a limited opportunity for customization by choosing base and accent colors.

Community

  • Bootstrap has been around for quite some time and has an enormous community, which produces themes, plugins and blog posts.
  • MDL came out only recently but has already become quite popular on GitHub. However it is still in its early days, and most of the time you are on your own.

But how do these frameworks compare in practice? This is a more difficult question to answer. This is why we’ve prepared a number of examples implemented in both frameworks that will help you compare what they are capable of. Click the images to see the examples side by side.

1. Grid

Arguably, the grid is the most important building block for a modern web page. It makes it possible for a design to scale from smartphones to large desktops.

The Bootstrap grid splits the page into 12 equally sized columns. Depending on the viewport width, four different size classes are applied – extra small (from 0 to 768px wide), small (768px to 992px), medium (992px to 1200px), and large (1200px+).

MDL has a similar grid system, but it only has three sizes – phone (0 to 480px), tablet (480px to 840px) and desktop (840px+). MDL desktop has 12 columns, tablet has 8 columns and phone has only 4 columns.

Grid Example (Click To View)

The Boostrap grid offers a lot more control. You can offset, hide and reorder columns, which helps with responsive design. In MDL we have to resort to empty columns to achieve offsets, but hopefully this will be fixed in the next versions.

Docs: Bootstrap Grid | MDL Grid

2. Header Navigation

Headers in Bootstrap are called Navbars. They begin collapsed in mobile views and become horizontal when there is enough space for them. Inside, you can nest an array of different elements that can be positioned with the help of classes.

Similarly, MDL header navigations start off collapsed behind a hamburger menu and expand with the growth of the viewport. They too have different stylings and possible positions.

Header Example

Headers (Click To View)

Docs: Bootstrap Navbars | MDL Navigation

3. Footer

Bootstrap doesn’t actually have separate footer components, while Material Design Lite has two options, a mini and a mega footer. For this example, we’ve translated the default MDL design to Bootstrap, using the grid and a bit of extra CSS.

Footer Example

Footers (Click To View)

Notice that on small viewports, MDL’s columns collapse and can be toggled one by one. For this effect to work, they’ve used a CSS only checkbox hack, instead of going for a JavaScript solution.

Docs: MDL Footers

4. Tabs

Both frameworks use pretty simillar syntax to create selectable tabs with different content. A number of links for swapping between the tabs, and an array of divs, selectable by id, for storing the content. They also both require JavaScript to work (Bootstrap requires jQuery as well).

Tabs Example

Tabs (Click To View)

Docs: Bootstrap Tabs | MDL Tabs

5. Buttons

Bootstraps default buttons are rectangular and have a bunch of size options. They can have their color changed via CSS or with the modifier classes (Danger, Warning, Success,…). Another unique feature to Bootstrap is the split button which is half button, half dropdown.

MDL offers both rectangular and circular buttons. Google has a guide on how and in which situations to use the different types of buttons. All buttons in MDL support the ripple animation effect.

Buttons Example

Buttons (Click To View)

Docs: Bootstrap Buttons | MDL Buttons

6. Tables

Tables are generally hard to make responsive. Bootstrap has overcome this problem by making a scrollbar appear when the table doesn’t fit. MDL’s developers haven’t added responsiveness to tables yet, but what they’ve done is add amazing styles making tables look super cool.

In bootstrap you can also make tables striped, bordered and condensed. MDL offers a default style (which again, looks very neat) and a design with selectable rows.

Table Example

Tables (Click To View)

Another cool feature that MDL brings to table is the option to align content according to it’s type by using classes. This works similar to Excel sheets, text in the middle, numbers to the right.

Docs: Bootstrap Tables | MDL Tables

7. Forms

Bootstrap’s forms support more types of input elements and have classes for making different alignments to the labels and inputs. It doesn’t come with validation out of the box, you will need to use a library like Parsley for that.

MDL has few supported input elements, but the ones that are supported have the material animations added to them making them pleasing to interact with. They also have integrated verification and pattern matching. This allows them to show an error message and turn red when the data isn’t valid.

Form Example

Forms (Click To View)

Docs: Bootstrap Forms | MDL Text Fields

8. Dropdown Menu

Here the approach of the two frameworks is the same. A button or anchor element to toggle the content, and an unordered list of items for the drawer.

The bonus of Bootstrap is you can add a separator line or a heading and do split buttons.

The plus of MDL is again a smooth animation compared to Bootstrap’s “display: none/block” technique.

Dropdown Example

Dropdowns (Click To View)

JavaScript required in both cases.

Docs: Bootstrap Dropdowns | MDL Menus

9. Tooltips

Bootstrap’s approach to tooltips is to add data-attributes to a button element, which then shows the tooltip on hover and click. The framework also presents two separate components: a simplified tooltip and a more advanced popover with a title.

MDL have achieved this with a different model. A button for toggling and a span element for the tooltip’s content. Two alternatives are given, a small and a large design. A negative here is that these only go downwards.

Popover

Tooltips (Click To View)

JavaScript is required in both frameworks.

Docs: Bootstrap Tooltips | Bootstrap Popovers | MDL Tooltips

10. Icons

Bootstrap comes with the Glyphicons icon font, which gives you over 250 pretty icons to choose from. They come bundled with the bootstrap CSS file and no special setup is needed.

MDL uses a set of icons that Google released some time ago called Material Icons. This is a huge set of nearly 800 icons. They are not bundled with MDL so you need to link it in the HEAD section of your page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Material Icons

Icons (Click To View)

Conclusion

Overall Material Design Lite is shaping up as a good frontend framework. Go with it if you want your web application to follow the Material Design guidelines, but you find Google’s other framework, Polymer, too complex. It is still the early days, but the fact that it is made by Google gives you confidence that it will always conform to the latest material design spec.

And if you don’t find Material Design appealing, there is Bootstrap with its large community. You can even get the best of both worlds by using one of the material themes that are available for it.

Source:: Tutorialzine.com

Making Your First HTML5 Game With Phaser

By Danny Markov

html5-game-phaser

Everybody loves classic games. How many of you remember the retro snake game from old Nokia phones? We sure do. This is why for this lesson we decided to recreate it using HTML5. There is a great open source game development framework called Phaser that we will use.

You will learn about sprites, game states and how to use the preload, create and update methods. Here’s what the final version of the game we’re building looks like:

Setup

Download a zip archive with the file structure of the game here. It contains all the image assets needed for the game but no code. We will be writing this next.

Now open index.html, add a title for your page and create links to all the JS files. Later, to play the game, just open this file in your browser.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Snake</title>
    <script src="assets/js/phaser.min.js"></script>
    <script src="assets/js/menu.js"></script>
    <script src="assets/js/game.js"></script>
    <script src="assets/js/game_over.js"></script>
    <script src="assets/js/main.js"></script>
</head>
<body>

</body>
</html>

Your directory should look like this:

Directory Tree

Directory Tree

How the game is organized

Phaser games are organized around states. Think of states in Phaser as the different parts of a game. Here are the states of our game:

  • The Menu state. It is handled by menu.js, and only displays the start image. When it is clicked, the game transitions to the Game state.
  • Game state. It is handled by game.js. This is the actual play area of the game. You control the snake, eat apples and have lots of fun. When you die, you transition to the Game_Over state.
  • Game_Over state. It shows gameover.png and displays your last score. When it is clicked you transition to the Game state.

main.js is our main JavaScript file. This is the place where we will create a new game instance and add a menu state.

1. Loading an image

Right now, our game doesn’t do anything. Let’s code the Menu state, and make it display the title screen.

During the setup we included the Phaser library in our HTML file. This gives us a global object called Phaser. Through it, we can access the library’s methods and functions for building games.

Now we will use the global Phaser object, and create a new game instance. This is an object which represents our entire game. We will add the states to it.

main.js

var game;

// Create a new game instance 600px wide and 450px tall:
game = new Phaser.Game(600, 450, Phaser.AUTO, '');

// First parameter is how our state will be called.
// Second parameter is an object containing the needed methods for state functionality
game.state.add('Menu', Menu);

game.state.start('Menu');

Now we need to initialize our Menu state object. In menu.js define a new object and add the functions below. When the state is started, the preload function will be called first, loading all the needed assets for our game. Once preloading finishes, create gets called, initializing the playing field and everything we want on it:

menu.js

var Menu = {

    preload : function() {
        // Loading images is required so that later on we can create sprites based on the them.
        // The first argument is how our image will be refered to, 
        // the second one is the path to our file.
        game.load.image('menu', './assets/images/menu.png');
    },

    create: function () {
        // Add a sprite to your game, here the sprite will be the game's logo
        // Parameters are : X , Y , image name (see above) 
        this.add.sprite(0, 0, 'menu');
    }

};

Because of browser security restrictions, to start the game you’ll need a locally running web server. This page from the Phaser guidelines has plenty of options for all operating systems – here. In other words, it won’t work if you simply double click your index.html.

If everything has been done right, a page with the the start screen should appear in your browser.

Rendering an image

2. Drawing the snake

As we mentioned earlier, the Game state is where the actual game play happens. This is also the place where we will draw the snake. Like we did with the Menu state, we need to register the Game state with the global game object in main.js. Here is how your code should look like:

main.js

var game;

game = new Phaser.Game(600, 450, Phaser.AUTO, '');

game.state.add('Menu', Menu);

// Adding the Game state.
game.state.add('Game', Game);

game.state.start('Menu');

We’ll also want to add some code in menu.js to let us start the Game state when it is clicked. For this purpose, we will replace the sprite with a button. Adding a button is basically the same as adding a sprite, you only need to provide a function to be called when it is clicked. Here is the final menu.js code:

menu.js

var Menu = {

    preload : function() {
        // Load all the needed resources for the menu.
        game.load.image('menu', './assets/images/menu.png');
    },

    create: function () {

        // Add menu screen.
        // It will act as a button to start the game.
        this.add.button(0, 0, 'menu', this.startGame, this);

    },

    startGame: function () {

        // Change the state to the actual game.
        this.state.start('Game');

    }

};

We can now proceed with coding the Game state and drawing the snake. The structure is similar to the one of the Menu state.

game.js

var snake, apple, squareSize, score, speed,
    updateDelay, direction, new_direction,
    addNew, cursors;

var Game = {

    preload : function() {
        // Here we load all the needed resources for the level.
        // In our case, that's just two squares - one for the snake body and one for the apple.
        game.load.image('snake', './assets/images/snake.png');
        game.load.image('apple', './assets/images/apple.png');
    },

    create : function() {

        // By setting up global variables in the create function, we initialise them on game start.
        // We need them to be globally available so that the update function can alter them.

        snake = [];                     // This will work as a stack, containing the parts of our snake
        apple = {};                     // An object for the apple;
        squareSize = 15;                // The length of a side of the squares. Our image is 15x15 pixels.
        score = 0;                      // Game score.
        speed = 0;                      // Game speed.
        updateDelay = 0;                // A variable for control over update rates.
        direction = 'right';            // The direction of our snake.
        new_direction = null;           // A buffer to store the new direction into.
        addNew = false;                 // A variable used when an apple has been eaten.

        // Set up a Phaser controller for keyboard input.
        cursors = game.input.keyboard.createCursorKeys();

        game.stage.backgroundColor = '#061f27';

        // Generate the initial snake stack. Our snake will be 10 elements long.
        // Beginning at X=150 Y=150 and increasing the X on every iteration.
        for(var i = 0; i < 10; i++){
            snake[i] = game.add.sprite(150+i*squareSize, 150, 'snake');  // Parameters are (X coordinate, Y coordinate, image)
        }


        // Genereate the first apple.
        this.generateApple();


        // Add Text to top of game.
        textStyle_Key = { font: "bold 14px sans-serif", fill: "#46c0f9", align: "center" };
        textStyle_Value = { font: "bold 18px sans-serif", fill: "#fff", align: "center" };

        // Score.
        game.add.text(30, 20, "SCORE", textStyle_Key);
        scoreTextValue = game.add.text(90, 18, score.toString(), textStyle_Value);
        // Speed.
        game.add.text(500, 20, "SPEED", textStyle_Key);
        speedTextValue = game.add.text(558, 18, speed.toString(), textStyle_Value);

    },



    update: function() {
        // The update function is called constantly at a high rate (somewhere around 60fps),
        // updating the game field every time.
        // We are going to leave that one empty for now.
    },


    generateApple: function(){

        // Chose a random place on the grid.
        // X is between 0 and 585 (39*15)
        // Y is between 0 and 435 (29*15)

        var randomX = Math.floor(Math.random() * 40 ) * squareSize,
            randomY = Math.floor(Math.random() * 30 ) * squareSize;

        // Add a new apple.
        apple = game.add.sprite(randomX, randomY, 'apple');
    }

};

Here is how the snake and apple should look like:

Drawing the snake

3. Movement and control

To make the snake move we’ll be working in the update function of game.js.

First of all, we create event listeners for controlling the direction of the snake with the arrow keys.

The actual movement is a bit complex, since update is triggered at a very quick rate, and if we move the snake every time it’s called we would end up with one uncontrollably speedy reptile. To change this, we’ve set up an if statement that checks weather this is the 10th consecutive call of update() using a counter variable called updateDelay.

If it really is the 10th call, we remove the last square of our snake (first element in the stack), give it new coordinates according to the current direction and place it in front of the head of the snake (top of the stack). Here’s how the code looks like:

update: function() {

    // Handle arrow key presses, while not allowing illegal direction changes that will kill the player.

    if (cursors.right.isDown && direction!='left')
    {
        new_direction = 'right';
    }
    else if (cursors.left.isDown && direction!='right')
    {
        new_direction = 'left';
    }
    else if (cursors.up.isDown && direction!='down')
    {
        new_direction = 'up';
    }
    else if (cursors.down.isDown && direction!='up')
    {
        new_direction = 'down';
    }


    // Since the update function of Phaser has an update rate of around 60 FPS,
    // we need to slow that down make the game playable.

    // Increase a counter on every update call.
    updateDelay++;

    // Do game stuff only if the counter is aliquot to 10.
    if (updateDelay % 10 == 0) {


        // Snake movement

        var firstCell = snake[snake.length - 1],
            lastCell = snake.shift(),
            oldLastCellx = lastCell.x,
            oldLastCelly = lastCell.y;

        // If a new direction has been chosen from the keyboard, make it the direction of the snake now.
        if(new_direction){
            direction = new_direction;
            new_direction = null;
        }


        // Change the last cell's coordinates relative to the head of the snake, according to the direction.

        if(direction == 'right'){

            lastCell.x = firstCell.x + 15;
            lastCell.y = firstCell.y;
        }
        else if(direction == 'left'){
            lastCell.x = firstCell.x - 15;
            lastCell.y = firstCell.y;
        }
        else if(direction == 'up'){
            lastCell.x = firstCell.x;
            lastCell.y = firstCell.y - 15;
        }
        else if(direction == 'down'){
            lastCell.x = firstCell.x;
            lastCell.y = firstCell.y + 15;
        }


        // Place the last cell in the front of the stack.
        // Mark it the first cell.

        snake.push(lastCell);
        firstCell = lastCell;

    }
    
}

Try and control the snake via the arrow keys on your keyboard.

Movement and control

4. Collision detection

A game in which the snake is roaming freely in the playing field is not much fun. We need to detect when the snake comes in contact with a wall, an apple or itself. This is called collision detection.

This is usually done by using a physics engine, of which the Phaser framework supports a few. But they are too complex for a simple game like this. We will instead do our own collision detection by comparing coordinates.

In the update function, after the code for moving the snake, we call a number of methods. They will compare coordinates to tell us if a collision has occurred.

update: function() {

        // Snake movement
        // ...
        // End of snake movement

        // Increase length of snake if an apple had been eaten.
        // Create a block in the back of the snake with the old position of the previous last block
        // (it has moved now along with the rest of the snake).

        if(addNew){
            snake.unshift(game.add.sprite(oldLastCellx, oldLastCelly, 'snake'));
            addNew = false;
        }

        // Check for apple collision.
        this.appleCollision();

        // Check for collision with self. Parameter is the head of the snake.
        this.selfCollision(firstCell);

        // Check with collision with wall. Parameter is the head of the snake.
        this.wallCollision(firstCell);
    }


},

appleCollision: function() {

    // Check if any part of the snake is overlapping the apple.
    // This is needed if the apple spawns inside of the snake.
    for(var i = 0; i < snake.length; i++){
        if(snake[i].x == apple.x && snake[i].y == apple.y){

            // Next time the snake moves, a new block will be added to its length.
            addNew = true;

            // Destroy the old apple.
            apple.destroy();

            // Make a new one.
            this.generateApple();

            // Increase score.
            score++;

            // Refresh scoreboard.
            scoreTextValue.text = score.toString();

        }
    }

},

selfCollision: function(head) {

    // Check if the head of the snake overlaps with any part of the snake.
    for(var i = 0; i < snake.length - 1; i++){
        if(head.x == snake[i].x && head.y == snake[i].y){

            // If so, go to game over screen.
            game.state.start('Game_Over');
        }
    }

},

wallCollision: function(head) {

    // Check if the head of the snake is in the boundaries of the game field.

    if(head.x >= 600 || head.x < 0 || head.y >= 450 || head.y < 0){


        // If it's not in, we've hit a wall. Go to game over screen.
        game.state.start('Game_Over');
    }

}

When the snake collides with the apple we increase the score and the length of the snake. But when a collision with the wall or the snake body occurs, we should end the game. To do this, we need to make the Game_Over state. Again, we need to register it with main.js. Add this line near the bottom of that file:

main.js

game.state.add('Game_Over', Game_Over);

And the state itself:

game_over.js

var Game_Over = {

    preload : function() {
        // Load the needed image for this game screen.
        game.load.image('gameover', './assets/images/gameover.png');
    },

    create : function() {

        // Create button to start game like in Menu.
        this.add.button(0, 0, 'gameover', this.startGame, this);

        // Add text with information about the score from last game.
        game.add.text(235, 350, "LAST SCORE", { font: "bold 16px sans-serif", fill: "#46c0f9", align: "center"});
        game.add.text(350, 348, score.toString(), { font: "bold 20px sans-serif", fill: "#fff", align: "center" });

    },

    startGame: function () {

        // Change the state back to Game.
        this.state.start('Game');

    }

};

Collision detection

That’s it! Our game is ready!

Further reading

We hope that you liked our simple game and learned a lot while following our tutorial. There is much more to learn about Phaser:

Source:: Tutorialzine.com

Announcing “Exploring ES6”

By Axel Rauschmayer

I’m glad to announce that the first version of my book “Exploring ES6” is finally finished! It was much more work than I anticipated – the PDF has over 460 pages! I’m really happy with how it turned out.

The complete contents of the book are available online, for free. The ebook version (PDF, EPUB, MOBI) costs about $30 (depending on the VAT in your country, you can pay more to support my work).

“Exploring ES6” is a living book: you can buy it now and will receive free updates until it is completely done. That may take a while, possibly until 2016. Once the book is done, there will also be a print version. New material will often be published on 2ality, before it is added to the book.

For all further information on ”Exploring ES6”, please consult its website.

Source:: 2ality

15 Awesome And Free JavaScript Books

By Danny Markov

15-awesome-free-javascript-books

JavaScript is eating the world! With it we can build web apps, desktop apps, mobile apps, games, robots, backends and more. Lots of software supports JS as an extension language for writing addons or manipulating data.

Even though it has its quirks, JavaScript is here to stay, and now is a good time to learn it! This is why we’ve collected for you our 15 favorite free books that will help you learn and sharpen your skills.

Basics

If you are novice programmer, or if you have never dealt with JavaScript before, these books are for you. You might also want to look at Codecademy’s great JavaScript course to get a bit of a hands on experience.

1. JavaScript For Cats

A great introduction to JavaScript. It shows you how to write code in the browser console and teaches you the basic language constructs. An essential book for teaching your cat (or yourself, if a cat is reading this) how to write JavaScript.

JavaScript For Cats

2. Learn JavaScript

This book is for beginners only as it covers the very basics of JavaScript. Its format is really simple with a short passage on every subject, followed by an example and an exercise. A nice quick resource for becoming acquainted with the language. After finishing this book, we recommend reading through Mozilla’s reintroduction to JavaScript tutorial.

Learn JavaScript

Learn JavaScript

3. Eloquent JavaScript

This is the second edition of the great book which teaches you how to write precise, elegant and practical code. It starts off with the basics of programming but as you go deeper you’ll get into topics like object-oriented JS and higher-order functions. After you’ve learned all that, the book will show you how to build an HTML game and some example apps with Node.js.

Eloquent JavaScript

Eloquent JavaScript

4. JavaScript Garden

A vast collection of examples for the most quirky parts of the language, which are the most likely cause of bugs. This book/guide explains bad practices, issues and other JS gotchas that don’t work as people usually expect them to.

JavaScript Garden

JavaScript Garden

5. JavaScript Allongé

JavaScript Allongé is a book about programming that covers everything from the basics, with values and expressions, to more complex concepts such as types, identity, functions, closures, scopes, and many more subjects up to working with classes and instances. This book is suitable for developers from all skill ranges, as it takes care to explain exactly how things work and what to do when you encounter a problem.

JavaScript Allongé

JavaScript Allongé

Advanced

Knowing how to code is one thing, but knowing how to design software is another. The books listed in this section will teach you how to write beautiful code.

6. Learning JavaScript Design Patterns

An in depth look at both classical and modern design patterns that help us structure our code in the most optimal way. This book is targeted mostly at professional developers as it looks at advanced JS concepts like closures and prototypal inheritance, that require a certain level of basic prior knowledge and understanding of the language.

Learning JavaScript Design Patterns

Learning JavaScript Design Patterns

7. Understanding ECMAScript 6

The JavaScript community is obsessed over the cool new features that we will see in ES6, the next version of the language. This book studies closely the differences between ECMAScript 5 and 6, the new additions and how to make the best use of them. Understanding ECMAScript 6 is aimed at intermediate-to-advanced JavaScript developers.

Understanding ECMAScript 6

Understanding ECMAScript 6

8. Human JavaScript

Code is run by machines, by written by humans. This book covers how to write simple and maintainable code. It discusses routing, views and templates, event handling, configuration, testing and more. If you wish to write modular and bug free code with your team, give this one a read.

Human JavaScript

Human JavaScript

9. Speaking JavaScript

A book targeted at people who are already familiar with other programming languages and want to learn JavaScript. If you know Java, PHP, C++, Python or any other mainstream language, consider this your quick start guide to the wonderful world of JS.

Speaking JavaScript

Speaking JavaScript

10. Programming JavaScript Applications

A book for JavaScript programmers with experience. It’s full of practical design patterns and architecture that will help you write more flexible and reusable code. If you have a large JavaScript code base, there is a good chance you’ll find valuable insight in this book.

Programming JavaScript Applications

Programming JavaScript Applications

11. JavaScript Spessore

JavaScript Spessore is a book focused on a technique for developing JavaScript apps using objects and metaobjects. Only experienced JavaScript devs should approach this book. It builds upon the techniques which were covered in this author’s other book, JavaScript Allongé.

JavaScript Spessore

JavaScript Spessore

Frameworks and libraries

Writing complex applications is difficult, which is why the community has created a growing number of robust frameworks and libraries. Here are a few books that will make developing with frameworks easier.

12. HTML 5 Shoot ‘em Up in an Afternoon

A book that guides readers through the process of making a shoot-em-up game similar to the classic video game 1942 using Phaser. Although this workshop is totally doable with the mighty copy & paste technique, we advise people going into this book to be prepared with some knowledge of JavaScript and basic trigonometry.

HTML 5 Shoot 'em Up in an Afternoon

HTML 5 Shoot ‘em Up in an Afternoon

13. Developing Backbone.js Applications

A great guide for creating JavaScript MVC applications using Backbone.js. Start with the fundamentals, work your way through the exercises, and learn how to build an application that is both cleanly organized and maintainable. This book is targeted at novice to intermediate developers wishing to learn how to better structure their client-side code.

Developing Backbone.js Applications

Developing Backbone.js Applications

14. Your First Meteor Application

A book on Meteor.js, full of practical examples, suitable for beginners. It won’t make you a full-fledged developer by the final page but you will, however, understand the core concepts that will make your future education in Meteor a lot more approachable. Readers should consider acquiring basic JavaScript and database skills before going into this book or Meteor.

Your First Meteor Application

Your First Meteor Application

15. jQuery Trickshots

This is our very own jQuery book! It is full of practical advice and techniques about jQuery. You will learn neat tricks, find out about awesome plugins, and discover how to use (and abuse) our favorite library to your advantage. It is remarkable how much jQuery has done to simplify client-side development.

jQuery Trickshots

jQuery Trickshots

It’s reading time!

We hope that you enjoy our little collection of books. Did we miss your favorite? Tell us in the comment section.

Source:: Tutorialzine.com

Making Your First Webapp with React

By Nick Anastasov

creating-your-first-web-app-with-react

React has gained a lot of popularity recently and has attracted a large and active community. This results in a vast wealth of reusable components for it that will save you time when coding. The library itself encourages writing loosely coupled code that is modular and composable.

In this tutorial, I will show you how to create a small application and how to split it into discrete components that talk to each other. As a base, we will take the npm-driven website example from last month, but we’ll do it the React way. It is interesting to compare the results – the React version has a few more lines of code than the jQuery version, but we can both agree that it is much better organized.

What you need to know about React

  • It is a popular client-side library/framework for building user interfaces, which is developed and used by Facebook.
  • With it, you organize your application around discrete components, with each handling its own rendering and state. Components can be nested within each other.
  • React is fast because it minimizes the number of writes to the DOM (the slowest part of any client-side application).
  • The recommended way to write React code is by using JSX – an extension to JavaScript which presents components as HTML elements. JSX needs to be compiled to JS in order to work in browsers.
  • It hasn’t hit version 1.0 as of this writing, so there might be changes in the future.
  • We have a nice article with examples for learning react which you can check out. Also there is the official getting started guide here.

What we will be building

We will create a simple web app, which invites people to search for locations and to store them in their browsers’ localStorage. The locations will be presented on a Google Map with the help of the GMaps plugin. We will use Bootstrap with the Flatly theme for the interface. In the process, we will break the application down into logical components and make them talk to each other.

Running the demo

If you don’t want to read the entire tutorial, you can go ahead and download the source code from the download button above. To run it, you need to have Node.js and npm installed. Assuming that you have, here is what you need to do:

  1. Download the zip with the source code from the button above.
  2. Extract it to a folder somewhere on your computer.
  3. Open a new terminal (command prompt), and navigate to that folder.
  4. Execute npm install. This will download and install all dependencies that are needed.
  5. Execute npm run build. This will compile the react components down to a regular JavaScript file named compiled.js.
  6. Open index.html in your browser. You should see the app.

There is one more npm command that I’ve prepared for you to make your development easier:

npm run watch

This will compile the JSX code down to JavaScript and will continue to monitor it for changes. If you change a file, the code will be recompiled automatically for you. You can see these commands in the package.json file.

The source code is easy to follow and has plenty of comments, so for those of you who prefer to read the source, you can skip the rest of the article.

Setting things up

As I mentioned, the recommended way to write React code is by using a JavaScript extension called JSX, which needs to be transformed to JavaScript. There are a few tools that can do this but the one I recommend is reactify – a browserify transform. So in addition to compiling JSX down to JavaScript, you get access to the require() node.js call and with it the ability to install and use libraries from npm.

To set up reactify, browserify and the rest, run this command:

npm install browserify reactify watchify uglify-js react

To create a production ready and minified JavaScript file, which you can put online, run this command in your terminal:

NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.min.js

Reactify supports a limited set of the new ES6 features with the --es6 flag, which I’ve used in the source code (you will see it in a moment).

While developing, use the following command:

watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js

Watchify will monitor your files for changes and recompile your source code if it is needed. It also enables source maps, so you can use the Chrome Debugger to step through your code.

Great! You can now write React modules, require() npm libraries and even use some ES6 features. You are ready for writing some code!

The code

Here are the components that we will be writing:

  • App is the main component. It contains methods for the actions that can be performed by the user like searching, adding a location to favorites and more. The other components are nested inside it.
  • CurrentLocation presents the currently visited address in the map. Addresses can be added or removed from favorites by clicking the star icon.
  • LocationList renders all favorite locations. It creates a LocationItem for each.
  • LocationItem is an individual location. When it is clicked, its corresponding address is searched for and highlighted in the map.
  • Map integrates with the GMaps library, and renders a map from Google Maps.
  • Search is a component that wraps around the search form. When it is submitted, a search for the location is triggered.

Components Breakdown

App.js

First up is App. In addition to the lifecycle methods that React requires, it has a few additional ones that reflect the main actions that can be performed by the user like adding and removing an address from favorites and searching. Notice that I am using the shorter ES6 syntax for defining functions in objects.

var React = require('react');

var Search = require('./Search');
var Map = require('./Map');
var CurrentLocation = require('./CurrentLocation');
var LocationList = require('./LocationList');


var App = React.createClass({

	getInitialState(){

		// Extract the favorite locations from local storage

		var favorites = [];

		if(localStorage.favorites){
			favorites = JSON.parse(localStorage.favorites);
		}

		// Nobody would get mad if we center it on Paris by default

		return {
			favorites: favorites,
			currentAddress: 'Paris, France',
			mapCoordinates: {
				lat: 48.856614,
				lng: 2.3522219
			}
		};
	},

	toggleFavorite(address){

		if(this.isAddressInFavorites(address)){
			this.removeFromFavorites(address);
		}
		else{
			this.addToFavorites(address);
		}

	},

	addToFavorites(address){

		var favorites = this.state.favorites;

		favorites.push({
			address: address,
			timestamp: Date.now()
		});

		this.setState({
			favorites: favorites
		});

		localStorage.favorites = JSON.stringify(favorites);
	},

	removeFromFavorites(address){

		var favorites = this.state.favorites;
		var index = -1;

		for(var i = 0; i < favorites.length; i++){

			if(favorites[i].address == address){
				index = i;
				break;
			}

		}

		// If it was found, remove it from the favorites array

		if(index !== -1){
			
			favorites.splice(index, 1);

			this.setState({
				favorites: favorites
			});

			localStorage.favorites = JSON.stringify(favorites);
		}

	},

	isAddressInFavorites(address){

		var favorites = this.state.favorites;

		for(var i = 0; i < favorites.length; i++){

			if(favorites[i].address == address){
				return true;
			}

		}

		return false;
	},

	searchForAddress(address){
		
		var self = this;

		// We will use GMaps' geocode functionality,
		// which is built on top of the Google Maps API

		GMaps.geocode({
			address: address,
			callback: function(results, status) {

				if (status !== 'OK') return;

				var latlng = results[0].geometry.location;

				self.setState({
					currentAddress: results[0].formatted_address,
					mapCoordinates: {
						lat: latlng.lat(),
						lng: latlng.lng()
					}
				});

			}
		});

	},

	render(){

		return (

			<div>
				<h1>Your Google Maps Locations</h1>

				<Search onSearch={this.searchForAddress} />

				<Map lat={this.state.mapCoordinates.lat} lng={this.state.mapCoordinates.lng} />

				<CurrentLocation address={this.state.currentAddress} 
					favorite={this.isAddressInFavorites(this.state.currentAddress)} 
					onFavoriteToggle={this.toggleFavorite} />

				<LocationList locations={this.state.favorites} activeLocationAddress={this.state.currentAddress} 
					onClick={this.searchForAddress} />

			</div>

		);
	}

});

module.exports = App;

In the render method, we initialize the other components. Each component receives only the data that it needs to get its job done, as attributes. In some places, we also pass methods which the child components will call, which is a good way for components to communicate while keeping them isolated from one another.

CurrentLocation.js

Next is CurrentLocation. This component presents the address of the currently displayed location in an H4 tag, and a clickable star icon. When the icon is clicked, the App’s toggleFavorite method is called.

var React = require('react');

var CurrentLocation = React.createClass({

	toggleFavorite(){
		this.props.onFavoriteToggle(this.props.address);
	},

	render(){

		var starClassName = "glyphicon glyphicon-star-empty";

		if(this.props.favorite){
			starClassName = "glyphicon glyphicon-star";
		}

		return (
			<div className="col-xs-12 col-md-6 col-md-offset-3 current-location">
				<h4 id="save-location">{this.props.address}</h4>
				<span className={starClassName} onClick={this.toggleFavorite} aria-hidden="true"></span>
			</div>
		);
	}

});

module.exports = CurrentLocation;

LocationList.js

LocationList takes the array with favorite locations that was passed to it, creates a LocationItem object for each and presents it in a Bootstrap list group.

var React = require('react');
var LocationItem = require('./LocationItem');

var LocationList = React.createClass({

	render(){

		var self = this;

		var locations = this.props.locations.map(function(l){

			var active = self.props.activeLocationAddress == l.address;

			// Notice that we are passing the onClick callback of this
			// LocationList to each LocationItem.

			return <LocationItem address={l.address} timestamp={l.timestamp} 
					active={active} onClick={self.props.onClick} />
		});

		if(!locations.length){
			return null;
		}

		return (
			<div className="list-group col-xs-12 col-md-6 col-md-offset-3">
				<span className="list-group-item active">Saved Locations</span>
				{locations}
			</div>
		)

	}

});

module.exports = LocationList;

LocationItem.js

LocationItem represents an individual favorite location. It uses the moment library to calculate the relative time since the location was added as a favorite.

var React = require('react');
var LocationItem = require('./LocationItem');
var moment = require('moment');

var LocationItem = React.createClass({

	handleClick(){
		this.props.onClick(this.props.address);
	},

	render(){

		var cn = "list-group-item";

		if(this.props.active){
			cn += " active-location";
		}

		return (
			<a className={cn} onClick={this.handleClick}>
				{this.props.address}
				<span className="createdAt">{ moment(this.props.timestamp).fromNow() }</span>
				<span className="glyphicon glyphicon-menu-right"></span>
			</a>
		)

	}

});

module.exports = LocationItem;

Map.js

Map is a special component. It wraps the Gmaps plugin, which is not a React component by itself. By hooking to the Map’s componentDidUpdate method, we can initialize a real map inside the #map div whenever the displayed location is changed.

var React = require('react');

var Map = React.createClass({

	componentDidMount(){

		// Only componentDidMount is called when the component is first added to
		// the page. This is why we are calling the following method manually. 
		// This makes sure that our map initialization code is run the first time.

		this.componentDidUpdate();
	},

	componentDidUpdate(){

		if(this.lastLat == this.props.lat && this.lastLng == this.props.lng){

			// The map has already been initialized at this address.
			// Return from this method so that we don't reinitialize it
			// (and cause it to flicker).

			return;
		}

		this.lastLat = this.props.lat;
		this.lastLng = this.props.lng

		var map = new GMaps({
			el: '#map',
			lat: this.props.lat,
			lng: this.props.lng
		});

		// Adding a marker to the location we are showing
		
		map.addMarker({
			lat: this.props.lat,
			lng: this.props.lng
		});
	},

	render(){

		return (
			<div className="map-holder">
				<p>Loading...</p>
				<div id="map"></div>
			</div>
		);
	}

});

module.exports = Map;

Search.js

The Search component consists of a Bootstrap form with an input group. When the form is submitted the App’s searchForAddress method is called.

var React = require('react');

var Search = React.createClass({

	getInitialState() {
		return { value: '' };
	},

	handleChange(event) {
		this.setState({value: event.target.value});
	},

	handleSubmit(event){
		
		event.preventDefault();
		
		// When the form is submitted, call the onSearch callback that is passed to the component

		this.props.onSearch(this.state.value);

		// Unfocus the text input field
		this.getDOMNode().querySelector('input').blur();
	},

	render() {

		return (
			<form id="geocoding_form" className="form-horizontal" onSubmit={this.handleSubmit}>
				<div className="form-group">
					<div className="col-xs-12 col-md-6 col-md-offset-3">
						<div className="input-group">
							<input type="text" className="form-control" id="address" placeholder="Find a location..." 
							value={this.state.value} onChange={this.handleChange} />
							<span className="input-group-btn">
								<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
							</span>
						</div>
					</div>
				</div>
			</form>
		);

	}
});

module.exports = Search;

main.js

All that is left is to add the App component to the page. I am adding it to a container div with the #main id (you can see this element in index.html in the downloadable zip file).

var React = require('react');
var App = require('./components/App');

React.render(
  <App />,
  document.getElementById('main')
);

In addition to these files, I have included the GMaps library and the Google Maps JavaScript API on which it depends, as tags in index.html.

Ready!

I hope that this tutorial gave you a better understanding of how to structure React applications. There is much more you can do with the library, including server-side rendering, which we hope to cover in the future.

Source:: Tutorialzine.com