Category Archives: Front End Framework

From Angular , React and many others.

Apache Cordova – Set up Windows & Mac

I have finally entered the world of mobile app. Namely Cordova.  Before anything else … Its a pain. Nothing like elbow grease! For anyone reading this section, and you are starting out on your journey with hybrid-app, especially when you develop in Visual Studio. DONT DO IT.  Anyways as I learn the hard way, I thought VS can make the installation of packages easy, as it turns out It did not.

How to set up your Windows for Apache Cordova (Not in order)

  1. Install Node.JS,
    • Run npm install -g cordova
  2. Install Java (JDK)
    • Add the /bin folder to the PATH
    • Add a new environment variable named JAVA_HOME and set value to the JDK path.
  3. Install Gradle (https://gradle.org/install/)
    • Add the /bin folder to the PATH
  4. Install Android SDK (https://developer.android.com/studio/)
    • Add the [sdk folder]/tools folder to the PATH
    • Add the [sdk folder]/platform-tools folder to the PATH
    • Add a new environement variable named ANDROID_HOME and set the value to the SDK path folder.
  5. Then run “cordova requirements” to see whether you have installed everything right.
  6. Now you are ready to create your first mobile hybrid app using HTML/CSS/JS.
    • run “cordova create FolderName com.yourdomain.app MyAppName”

How to set up your Mac for Apache Cordova (Not in order)

  1. Check this link for detailed info: https://www.fiznool.com/blog/2017/05/29/a-guide-to-installing-cordova-on-your-mac/
  2. Install Xcode from the website or app store.
    • Run “xcode-select  –install” on the terminal. This will install cli for Xcode.
  3. Install Java JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
  4. Install Android SDK https://developer.android.com/studio/index.html#command-tools
    • Extract the content(/tools) under /android anywhere in your drive system.
    • Run cmd
      • cd ~/android/tools/bin
        ./sdkmanager "build-tools;25.0.3" "emulator" "platforms;android-25" "platform-tools" "system-images;android-25;google_apis;x86" --verbose
        ./avdmanager -v create avd -n x86 -k "system-images;android-25;google_apis;x86" -g "google_apis"
    • This will generate /build-tools, /emulator, /platforms and /system-images.
  5. Install Gradle https://gradle.org/releases
    • Unzip the gradle content inside the android we created.
  6. Configure ANDROID_HOME env variable and PATH.
    • Open ~/.bash_profile and enter and save.
    • export ANDROID_HOME=$HOME/android
      export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/gradle/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools/bin
    • Depends where you extracted /android-sdk, /gradle and android tools.
  7. Install Cordova via NPM “npm install -g cordova”
  8. Install iOS-sim and iOS-deploy “npm install -g ios-sim ios-deploy” Lets you deploy to simulator and device.
  9. Then you can start creating projects using “cordova create myapp me.domain.myapp myapp”
  10. After you created your app and adding a iOS platform. You would build it “cordova build ios”. And the .xcworkspace in the platforms/ios/ folder must be opened in Xcode and you would build it from Xcode.

Notes: AVD Manager manages virtual devices while SDK Manager manages APIs currently installed on the system.

References:

https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/publishing/publish-to-a-store?view=toolsforcordova-2017

—-

Troubleshooting:

  1. Error: Cordova Could not reserve enough space for 2097152KB object heap

—-

Tips

  1. Run “cordova emulate android” to deploy application to virtual emulator device.
  2. If you are using AVD(Android Virtual Device). And run your emulator and get “PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT”. Set your environment to where your android-sdk is, and this should fix it. Note: You would need HAXM Accelerator and you will need Hyper-V disabled if you are using Windows. Download and install this in the SDK Manager.

And just bite on something and hope for the best. You will want look how to deploy and debug your app. I recommend using Visual studio code -> cordova plugin. It allows you to have a emulator for the browser to just hammer on development.

Good luck!

All about React and boilerplate

Here I am going to delve right deeper in the React world but in a very basic term. As a full-stack developer (please dont take this as being know everything do everything this is just what I see myself do nowadays) I keep going in and out of front-end and back-end side of things, I tend to forget this nitty gritty details. Anyways.

React on its own resemble this

// without Babel JSX
var hello = React.createElement("div",{property: value},"Inner html with ${this.props.name}" }
ReactDom.Render(hello,document.getElementById("container"));
// with Babel JSX
let Hello = (props) => <div>Hello</div>;

Most of the time we want to develop with JSX and Babel is pretty much the defacto transpiler for it. So if you plan to use React in JSX on your page you make sure you include react , react-dom and babel-jsx in your script.

Boilerplate React Development

Now with boilerplate, React is very good with SPA(Single Page App) and Hybrid (React with your HTML page). We will focus on SPA of what we are going to need to start developing using NPM as our package manager.

  • React – this is the core react library
    • npm install --save react react-dom
    • [optional] - if you are looking for more react exclusive functionality for example the routing capability etc. Install these to your package.
      
      npm install --save react-router-dom 
      
      react-router-dom: is the v4 of react router. No need to use "react-router" as this is v3
  • Babel – the core transpiler for JSX
    • npm install --save-dev babel-core babel-loader
  • Babel-presets – babel use to have all features in one package <version 6. In babel 6 they have separated all these features and plugins hence. We now need to install each feature separately. babel-preset-2015 supports ES6 and React
    • npm install --save-dev babel-preset-env babel-preset-react
      
      babel-preset-env: new support for ecmascript+ down to ES5.
      babel-preset-react: to allow react syntax to be transpiled.
      
  • Webpack – now our module bundler that will tie everything together. Webpack-dev-server is for hot reloading while developing. Very handy indeed
    • npm install --save-dev webpack-cli webpack
      npm install -g webpack-dev-server 
      
      web-dev-server: must be global
  • Loaders – loaders are a way to bundle your static assets into few different things used in webpack
    • npm install --save-dev url-loader style-loader file-loader css-loader resolve-url-loader
      
      url-loader: makes your assets like images embedded inside your JS using base64 encoding. Useful for smaller files. Set the limit and let file-loader do the rest for bigger files
      file-loader: it handles assets and emits(create a separate file) to another location. Good for bigger files.
      css-loader: the css loader takes the CSS and convert it to a string. eg. var css = require('css-loader!./css/mycss.css'); it just loads the string of css as javascript/node dont know how to parse .css file.
      style-loader: usually used conjunction with css-loader and inserts it into the page by add a <style>...</style> tag to the javascript.
      resolve-url-loader: resolves url() relative path in your css, specially for scss. When you are importing another .SCSS file to your base scss, css-loader context path is the base importer. This will screw up any url in the importee path. Use this to make any imported scss file folder context as if the imported scss is the parent.
    • [optional] npm install --save-dev sass-loader  node-sass postcss-loader autoprefixer
      
      postcss-loader: by itself it doesnt do anything, but it pretty much a foundation for all its plugin. So if you want to use autoprefixer, you will need to install postcss-loader first. 
      sass-loader: sass loader adds support for sass files and then to css then to your normal css-loaders. 
      node-sass: is required for peer-dependency (plugin-that-needs-another-plugin)
    • Production Package
      • npm install --save-dev mini-css-extract-plugin
        
        mini-css-extract-plugin: works with webpack 4, allows to separate CSS to its own file. [Important Note] This plugin dont work with webpack-dev-server. Use webpack itself to build for production.
    • Plugins [optional]
      • npm install --save-dev html-webpack-plugin 
        
        html-webpack-plugin: This lets you process the main index.html and injects assets into it automatically. It is required if you like to hash your assets for busting caching browsers.

Front-end Development Arsenal

Its been a while since I have posted. I have been learning a lot since this past few months. And technologies is always evolving. I actually forgot to post the tools I used when creating front-end especially for responsiveness.

Here are my select go to “frameworks” for front-end development

  • Semantic UI / Semantic UI React (dependent on JQuery) hands down the best UI library I have ever used! Move aside Bootstrap! Its got everything you ever need from validation, grids, elements etc. Look no further, and what makes it even more attractive. Customizable and Ease of use!
  • SASS/SCSS! What can be more easier when doing CSS Styling? Great structuring, mixin, operation & variables! Its more than a stylesheet now , its a language! SASS will compile your scss/sass file to css. This requires you have RUBY installed as this is a GEM package . Install Ruby first on your machine. Then do “gem install sass” and start compiling your scss file like this “sass ./style.scss ./style.css” then you can do “sass –watch style.scss style.css” to automatically compile it You can also compile bunch of sass files inside a directory “sass –watch folder1:folder2” . You can download GUI compilers of course but for a bare minimum, this is all you need specially when you are learning.
  • Bourbon.IO and Bourbon.Neat. When you have SASS , you might want built-in mixins(or functions in your scss). Bourbon itself provides you with mixins and variables that will help you define values. It also helps you with prefix vendor specific properties(although this has been deprecated). Bourbon is like Compass another SASS frameworks with built-in mixins/function. Bourbon.Neat this guy here is my responsive design grid tool for SASS. Semantic UI has grid tool but since you are developing in SASS its much cleaner to take advantage of this feature. As its gives you “automatic-control” of your html from your css when doing responsive design.
  • React.js. What else can I say , React just takes the cake for me compare to Angular, Vue.js etc. When you’re doing dynamic things in your front-end. React just work by itself! What I like about it is customizability (dont know if thats a word). You can have different part of your page as react elements that response to state changes hence the name I supposed. You can build a whole Web-App based on it or just part of it. Its great! (You will need to add JSX transpiler to your page like BABEL(react and react-dom) and once ready for production, pre-compile it and away you go)

That is the main framework/tool I used for a simple page creation. Although if you havent learned these yet. I urge you to!

Honourable mention below:

  • NPM – is the package manager for Node.js. You might need to use this if you are developing an SPA(Single Page Application) in React. Whether you wanna use Node.JS for your app, its definitely a requirement. Node.js is a whole different beast altogether.
  • React/Redux/Immutable.JS in extension with React , you might also want to learn Flux like architechture. Redux again helps you create SPA in React. It helps for managing states, actions and immutability. Immutable.JS is a helper library to help you mutate object/states. I suggest to learn this 3 if you are doing SPA.
  • Webpack is a bundle manager that lets you do pretty much anything! It can integrate with NPM to do development builds and production builds. It bundles all your dependency files and puts them in one file! It also converts your CSS/SASS and even distribute your images to a selected directory. It can be a bit confusing to learn but definitely worth understanding how it works.
  • Normalize.css , this is just a bunch of css rules that will.. well normalise all your elements to a more predictable manner! I can even say its a must have to include before anything on your page.

Well thats about it. My secret weapon for Front-End development!

AngularUI: Companion suite for AngularJS

We all know that Angularjs is a framework solely for Front-End development and NodeJS for server-side stuff.

Coding from scratch to variety of features can really be a pain, but now with AngularUI a companion “plug ins” it takes all the drama and hassle from creating them from scratch. This is one I will definitely use for my projects .

There are lot more out there that an Angularjs developer can use. I also like to include to use Bower package manager to install them.

Here is the link to it: http://angular-ui.github.io

And the link to a tutorial by Bee Kalliger: https://youtu.be/bSy_eTK1MkU?list=PLGwTv1L2yi5jovGz3OFO3lL7ZrmZ1D2so

Or video down below: