logicmania

It's been a long time since i have posted anything in this blog. I have been trying react-native for the last 3 months. And it's been a wonderful experience. From a Angular background it seemed difficult to adopt react initially. Once i got it, it seems very easy and interesting. About the performance of RN is just awesome. I am using Windows 10 Android Installation Installation is pretty simple. There are two ways to create an application, using expo-cli and react-native-cli. I prefer the second one. It seems like a little complex but when developing large application it's the best way to start. Setup As a prerequisite we need to install nodeJS, Python, JDK and need to setup Android. We need to install react-native-cli globally for creating and running the project npm install -g react-native-cli Running Once you install the cli we can create the application. react-native init firstProject After creating the application we can move into the application...

In previous post we tried to create module, component and routing. Lets look into how to add third party libraries. You could check out the code from  here . git checkout -b part3.0 origin/part3.0 In Angular4 adding third party libraries is pretty easy. Install using npm and add the module. Its one of my most loved feature in Angular4. PrimeNG PrimeNG is one of the most used and most popular Angular4 library. It consists lot of components and its easy to setup and use. Besides it does have a good team working behind this library. In my experience it's one of the fast developing library. To install PrimeNg run npm install primeng --save npm install font-awesome --save PrimeNg needs font awesome for icons . Unlike any other libraries , PrimeNG had separate module for each component, which helps to include only selected component in the bundle. Lets include styles for the components. In .angular-cli.json add "styles": [ "../node_modules/bootstra...

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing. You could check out the code from here . git checkout -b part2.0 origin/part2.0 We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components. npm install bootstrap@3 We need to add the bootstrap stylesheet in tha .angular-cli.json. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], Our first Module Lets add a new module employee.  Inside "src/app" run ng generate module employee or ng g m employee Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also. ng g m employee --routing Time for component It will create new employee module with its own routing.   lets add a component for listing the employee. S...

AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework. My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4 One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interest...

Find the previous  episode here . Checkout the part 3 branch git checkout -b part4.0 origin/part4.0 Lets change the templating a bit different so that we could add data to the template. Now if we click on a link other than home everything will be gone. So we will move the link list to the index before maincontent so that it will always remain there. Next we will replace the modules/home/Home.html with some dummy text. The index.html wil looks like this <div>   <ul>     <li><a href="#home">Home</a></li>     <li><a href="#employee">Employees</a></li>     <li><a href="#project">Projects</a></li>   </ul> </div> <div id="maincontent">   </div> Next we will add some more dummy content to other template html file in projects and employees . And also change the controllers to load and how the content. And also we need to...

Find the previous  episode here . Checkout the part 3 branch git checkout -b part3.0 origin/part3.0 We have created the routing and added a test module to the application. Lets try to add more to module. Templating          Am going to use RequireJS "Text" plugin for templating along with  Underscore.js and Jquery Text     An AMD loader plugin for requireJS to load text resouces. We will load html using text. Underscore.js     " Underscore  is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. " underscore provides a powerfull templating option. You could try lodash also which is a fork of UnderscoreJS Let's do some coding now. First we need to create a template in html. We will extract this code from index.html and will create a new html in modules/home/templates/home.html <div> <ul> <li><a href="#home">Hom...

Find the previous episode here . Checkout the part2.0 branch git checkout -b part2.0 origin/part2.0 In this section we will look into how a routing can be done. For this we are using another lightweight routing framework Page.js .  First install it using bower. bower install visionmedia/page.js We already had added the page in config.js. Now we need to create a router.js which will be in router folder.   define(['page'], function(page) { }); We will create a blank module with loading the page framework. Here we use the Module ID for the module which we defined in config.js. You could use the url also like "bower_components/page/page" But it would be better if a module id us used. NOTE: In requireJS the .JS extension will not be used. Next we will require the router module in app.js. define(['config'], function(config) { "use strict"; require(['router/router']); }); This will load the router module after loading the c...

Modular programming helps to divide the application code based on the module. These programming style helps to manage as well develop the application easily. Requirejs is lightweight framework used in javascript to develop applications using the modular programming. RequireJS RequireJS is lightweight javascript framework which enables AMD(Asynchronous Module Loader). RequireJS helps to load javascript file and modules asynchronously. Apart from using in browser , it’s also be used alongside in Node projects. Why RequireJS? It’s lightweight, scalable, comes with an excellent optimising tool. Apart from these the use of  RequireJS comes handy when you need to divide and load javascript files and modules whenever they need. Suppose you had an application which have a home page, employees, and projects module. And had 3 javascript files like home.js, employees.js and projects.js. Normally in single page application you need to load these files when the page loads. L...

It's a continuation of previous post . Lets discuss about the application structure in a MEAN.js Application. Actually MEAN follows a MVC(Model-View-Controller). There are mainly two types of application structure for MVC. 1. Horizontal Folder Structure         This type of structure follows the division on functional role rather than the feature.The files and folders will kept inside a application folder .  There will be one controller folder for all application controllers. Horizontal structure is for simple projects where the features were limited. An example for this structure is app ----controllers ----models ----routes ----views config ----env ----strategies ----config.js ----express.js public ----config ----controllers ----directives ----css ----filters ----images ----views ----services server.js package.json app folder consists of all the express.io files or the server side files. app/controllers folder holds all express controller logic. a...

Recently am into Javscript development like node, angular etc. And i came across this awsome stack just like WAMP . It's called MEAN and am so much excited about this stack. MEAN stands for  Mongodb ]- The Database Express - The serverside framework Angular - The Client side MVC framework Node.js - the server or the server side runtime There are two major MEAN generators availbale , MEAN.js and MEAN.io . Both gives a kickstart  in MEAN development. But note than MEAN stack development is possible without these.  Both are theoratically same and uses same technologies and also developed by same guy, Amos Haviv . Am write down my "Getting started" experience with MEAN.js.  For MEAN.js you need these technologies installed. Node.js Git Mongodb After installing these , open a terminal and type: npm install -g grunt-cli Next Install bower npm install -g bower Next install yeomen generator npm install -g generator-meanjs ...