Monthly Archives: October 2018

PYTHON’S FLASK

Python’s Flask

Python_Flask
Flask is a small and powerful web framework for Python. It is easy to learn and simple to use, enabling the users to build their web app in less amount of time. Flask is also easy to get started with as a beginner because there is little boilerplate code for getting a simple app up and running. Flask backs extensions that can add application features as if they were implemented in Flask itself. Extensions exist for object-relational mappers, form validation, upload handling, and several common frameworks related tools. Extensions are updated more regularly than the core Flask program. Flask is commonly used with MongoDB which allows it more control over databases and history.

INSTALLING FLASK

Before getting started, the user need to install Flask. Because systems vary, things can intermittently go wrong during these steps.

INSTALL VIRTUALENV

Here we will be using virtualenv to install Flask. Virtualenv is a suitable tool that creates isolated Python development environments where the user can do all his/her development work. If the user installs it system-wide, there is the risk of messing up other libraries that the user might have installed already. Instead, use virtualenv to create a sandbox, where the user can install and use the library without affecting the rest of the system. The user can keep using sandbox for ongoing development work, or can simply delete it once the user is finished using it. Either way, the system remains organized and clutter-free.

If you see a version number, you are good to go and you can skip to this “Install Flask” section. If the command was not found, use easy_install or pip to install virtualenv. If you are running in Linux or Mac OS X, one of the following should work:

$ sudo easy_install virtualenv

$ sudo pip install virtualenv
If you are running Windows, follow the “Installation Instructions” on this page to get easy_install up and running on your system.

INSTALL FLASK

After installing virtualenv, the user can create a new isolated development environment, like so:

$ virtualenv flaskapp

Here, virtualenv creates a folder, flaskapp/, and sets up a clean copy of Python inside for the user to use. It also installs the handy package manager, pip.

Enter newly created development environment and activate it so to start working within it.

1
2
$ cd flaskapp
$ . bin/activate
Now, the user can safely install Flask:
$ pip install Flask

SETTING UP THE PROJECT STRUCTURE

Let’s create a couple of folders and files within flaskapp/ to keep the web app organized.

INSTALL FLASK

Within flaskapp/, create a folder, app/, to comprise all files. Inside app/, create a folder static/; this is where the user has to put the web app’s images, CSS, and JavaScript files, so create folders for each of those, as demonstrated above. As well, create another folder, templates/, to store the app’s web templates. Create an empty Python file routes.py for the application logic, such as URL routing.

And no project is complete without a helpful description, so create a README.md file as well.

BUILDING A HOME PAGE

While writing a web app with a couple of pages, it quickly becomes bothersome to write the same HTML boilerplate over and over again for each page. Also, if the user needs to add a new element to their application, such as a new CSS file, the user would have to go into every single page and should add. This is time consuming and error prone. Wouldn’t be nice if, instead of repeatedly writing the same HTML boilerplate, the user can define their page layout just once, and then use that layout to make new pages with their own content.

APP/TEMPLATES/HOME.HTML

1 {% extends “layout.html” %}

2 {% block content %}

3 <div class=”jumbo”>

4 <h2>Welcome to the Flask app<h2>

5 <h3>This is the home page for the Flask app<h3>

6 </div>

7 {% endblock %}

BUILDING AN ABOUT PAGE

In the above section, we have seen the creation of a web template home.html. Now, let’s repeat that process again to create an about page for our web app.

APP/TEMPLATES/ABOUT.HTML

{% extends “layout.html” %}

{% block content %}

<h2>About</h2>

<p>This is an About page for the Intro to Flask article. Don’t I look good? Oh stop, you’re making me blush.</p>

{% endblock %}

In order to visit this page in the browser, we need to map a URL to it. Open up routes.py and add another mapping:

from flask import Flask, render_template

app = Flask(__name__)

@app.route(‘/’)

def home():

return render_template(‘home.html’)

@app.route(‘/about’)

def about():

return render_template(‘about.html’)

if __name__ == ‘__main__':

app.run(debug=True)

JAVASCRIPT ES6

JavaScript ES6

JavaScript ES6 brings new syntax and amazing features to make the users code more up-to-date and readable. It allows the user to write less code and do more. ES6 introduces the user to many great features like arrow functions, template strings, class destruction, Modules, and much more. So, let’s dive deep in and study the new features on JavaScript ES6.

CONST & LET

Const is a new keyword in ES6 for declaring variables. const is more influential than var. Once it is used, the variable cannot be reassigned. In other words, it is an immutable variable except when it used with objects. This is really useful for targeting the selectors.

const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = “Constant variable”;
b = “Assigning new value”; // shows error.

LET

Let is similar to var but let has scope. Let is only accessible in the block level it is defined.

JavaScript ES6
if (true) {
let a = 40;
console.log(a); //40
}
console.log(a); // undefined
In the above example variable ‘a’ is defined inside If statement and so it’s not accessible outside the function.

ARROW FUNCTIONS

The arrow function makes the users code more readable, more structured, and look like modern code.

// Old Syntax
function oldOne() {
console.log(“Hello World..!”);
}
// New Syntax
var newOne = () => {
console.log(“Hello World..!”);
}
The new syntax may be confusing a bit.
There are two parts of the syntax.
var newOne = ()
=> {}

The first part is declaring a variable and assigning the function () to it.
The second part is declaring the body part of the function. The arrow part with the curly braces defines the body part.

DEFAULT PARAMETERS

If you are familiar with other programming languages such as Ruby, Python then default parameters is not new to you.

Default parameters are parameters which are given by default while declaring a function. But the value can be changed when calling the function.

let Func = (a, b = 10) => {
return a + b;
}
Func(20); // 20 + 10 = 30

In the above example, we are passing only one parameter. The function makes use of the default parameter and executes the function.

MAPS

Map holds key-value pairs, it is similar to an array but we can define our own index and indexes are unique in maps. In maps, all indexes are unique and we can use any value as key or value.

var NewMap = new Map();
NewMap.set(‘name’, ‘John’);
NewMap.set(‘id’, 2345796);
NewMap.set(‘interest’, [‘js’, ‘ruby’, ‘python’]);
NewMap.get(‘name’); // John
NewMap.get(‘id’); // 2345796
NewMap.get(‘interest’); // [‘js’, ‘ruby’, ‘python’]

GETTERS AND SETTERS

Getters and setters are one of the useful feature introduced in ES6. It will come in handy if you are using classes in JS.

class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
let person = new People(“Jon Snow”);
console.log(person.getName());
person.setName(“Dany”);
console.log(person.getName());
Output:
Jon Snow
Dany

WEBPACK VS GRUNT

Webpack VS Grunt

GRUNT

GruntJS is a command-line tool for front-end developers to run predefined repetitive tasks. Whereas, tasks are defined declaratively with configuration objects, which are controlled by plugins to keep the core package at a sufficient size. It is used to automate JavaScript workflows like concatenating and minifying JS files, carrying out tests, refreshing browser to upload script changes and much more.

WEBPACK

At first, Webpack is a module bundler, though it is quite often used instead of Grunt task runners. This advanced tool provides developers with control over how it splits the modules, allowing them to adjust builds to certain situations and workaround solutions that do not function properly out of the box.

Webpack VS Grunt

Comparing Webpack vs Grunt, the first of those offers more flexibility and advanced functionality for modern front-end projects. It comes with a functional core and can be extended using specific loaders and plugins. Fundamentally it is used for bundling JavaScript modules with dependencies into files, but for difficult JavaScript applications with lots of non-code assets it can provide great benefits.

In this article we are going to explain the major differences between Grunt and Webpack and also the cons of each command-line tool.

PROS

Webpack VS GRUNT

CONS

differences between Grunt and Webpack

AUTOSCALING WITH KUBERNETES

Autoscaling with Kubernetes

Autoscaling with Kubernetes

Customers using Kubernetes respond to end user requests swiftly and ship software faster than ever before. But what happens when the user builds a service that is even more popular than planned for, and run out of compute? In Kubernetes 1.3, we are proud to announce that we have a solution: autoscaling. On Google Compute Engine (GCE) and Google Container Engine (GKE) and on AWS, Kubernetes will automatically scale up the cluster as soon as user need it, and scale it back down to save money when the user doesn’t need. Let us explore this article and know more about autoscaling in Kubernetes.

WHAT TO SCALE?

In the context of Kubernetes cluster, there are typically two things one want to scale as a user:

Pods: For a given application let’s say you are running X replicas, if more requests come then the group of X pods can handle, it is a good idea to scale to more than X replicas for that application. For this to work faultlessly, the nodes should have enough available resources so that those extra pods can be scheduled and executed successfully.

Nodes: Capacity of all nodes putting together characterizes cluster’s capacity. If the workload demand goes beyond this capacity, then the user would have to add nodes to the cluster and make sure the workload can be scheduled and executed effectively. If the PODs keep scaling, at some point the resources that nodes have available will run out and the user will have to add more nodes to increase overall resources available at the cluster level.

When to Scale?

The choice of when to scale has two parts, one is measuring a certain metric continuously and when the metric crosses a threshold value, then acting on it by scaling a certain resource. For instance, if the user wants to measure the average CPU consumption of their pods and then trigger a scale operation if the CPU consumption crosses 80%. But one metric does not fit all use cases and for different kind of applications, the metric might vary.

So far we only considered the scale-up part, but when the workload usage drops, there should be a way to scale down with poise and without affecting the existing requests being processed.

HOW TO SCALE?

In case of pods, simply changing the number of replicas in replication controller is enough. In case of nodes, there should be a way to call the cloud provider’s API, create a new instance and make it a part of the cluster, which is relatively non-trivial operation and may take more time comparatively.

KUBERNETES AUTOSCALING

With this understanding of autoscaling, let’s discuss about detailed implementation and technical details of Kubernetes autoscaling.

CLUSTER AUTOSCALER

gfhCluster autoscaler is used in Kubernetes to scale cluster specifically nodes dynamically. It watches the pods continuously and if it finds that a pod cannot be scheduled, then based on the PodCondition, it chooses to scale up. This is far more effective than looking at the CPU percentage of nodes in aggregate. Since a node creation can take up to a minute or more depending on the cloud provider and other factors, it may take some time till the pod can be scheduled. Within a cluster, the user might have multiple node pools. Also, the nodes can be spread across AZs in a region and how the user scale might vary based on topology. Cluster Autoscaler provides various flags and ways to pull the node scaling behaviour.

For scaling down, it looks at average utilization on that node, but there are other factors which come into play. For instance, if a pod with pod disruption budget is running on a node which cannot be re-scheduled then the node cannot be removed from the cluster. Cluster autoscaler provides a way to terminate nodes and gives up to 10 minutes for pods to reposition.

HORIZONTAL POD AUTOSCALER

Horizontal pod autoscaler (HPA) is a control loop which viewpoints and scales a pod in the deployment. This can be done by creating an HPA object that refers to a deployment controller. The user can also define the threshold and minimum and maximum scale to which the deployment should scale. The original version of HPA which is GA (autoscaling/v1) only supports CPU as a metric that can be monitored. The current version of HPA which is in beta supports memory and other custom metrics. Once the user creates an HPA object and it is able to query the metrics for that pod, the user can see it reporting the details:

$ kubectl get hpa

NAME REFERENCE TARGETS MINPODS MAXPODS REPLICAS AGE

helloetst-ownay28d Deployment/helloetst-ownay28d 8% / 60% 1 4 1 23h

AMAZON MOBILE HUB

Amazon Mobile Hub

Amazon Mobile Hub is a mobile service, which lets you to build, test, and monitor usage of mobile apps swiftly with no trouble. It permits the users to integrate various AWS services to user’s mobile application in matter of some clicks. Once the app is ready, Mobile Hub allows the user to test the app on real devices as well as make use of analytics to track usage of the app.

Mobile Hub also allows users to focus more on the application building rather than oncentrating on the infrastructure build.

AWS Mobile Hub comprises a variety of tools, including tools to track application analytics, manage end-user access and storage, set up push notifications, deliver content, and build back-end services.

Another major advantage about Mobile Hub is that there is no limit to the number of projects the user can do with it. The pricing is also as per the pay-as-you-go scenario. Some of the global corporations that use Mobile Hub include, Bustle, Netflix, Yelp, HP, Etsy, Earth Networks, HTC, and Ticketmaster.

HOW IT WORKS

CREATING AN APP

To start using AWS Mobile, the user can go ahead with their own app or browser through Amazon AWS starter kits and select a fully functional app with pre-configured backend and front end.

SET UP THE BACKEND

AWS Mobile Hub acts as the reliable platform where the user can configure AWS services. Information about all the services will be saved in a cloud configuration file in the backend.

CONNECT TO THE BACKEND

AWS Mobile SDK lets you access all the AWS services you need. Configure the SDK in your app with the help of the information in the cloud configuration file. The user can start a new project in AWS Mobile Hub and select the features provided within the integrated console.

Then the user can choose the destination platform, iOS or Android, and add additional information such as device tokens, registration IDs, create API keys to understand and recognize the user or application.

If needed, the user can also add the cloud logic. This would help when the user need to call the cloud functions from the mobile app directly. Cloud functions can also be created to connect the app to several other software resources. By configuring Amazon API gateway and AWS Lambda, it is possible to execute cloud functions.

Select and configure all the features needed to build the app, and then start with the project. Once the Mobile Hub is activated, it generates a source package that can be downloaded and used.

The app that is built with the Mobile Hub can be used as a starter app, and more updates and modifications can be made from there.

AWS Mobile Hub help the developers to easily build B2C, B2E, and B2B mobile apps. Some of the features required for enterprise apps in specific include agility, security, scalability, ease in developing and deploying, identity management, user engagement, and insights.

THE VERDICT

Mobile app development for organizations can be a complex task, but this can be simplified with the help of AWS Mobile Hub. The entire process of building, testing, and monitoring applications can be flattened out with the combination of Cognito, Device Farm, Lambda, and other major services.

Now the entire organization workforce can complete their tasks through their mobile devices and elude all the complex steps they had to endure earlier, and this includes reduced coding.

WHAT IS DYNATRACE AND HOW DOES IT WORK?

What is Dynatrace and how does it work?

Dynatrace is one of the APM tool which meant for collecting application performance metrics and extend its capability to monitor at an instance level.

To elaborate with an example, consider you developed one web application (application could be of any type, this is just for example), and you want to know how my application’s health is – like how much time is taken for one click “submit” button from user interface.

Apart from giving you full response time of a transaction (if properly configured) but would also give you at code level (diagnostic) which method is consuming more time in processing the request.

Adding to above, you can set thresholds and instruct it to send you mail (or create tickets) and inform you if something goes beyond the normal.

How does it work?

Dynatrace server should be installed on your system and it consists of host and agent . It has a dashboard

through which we can diagnose our system on one place.

Our server can easily interact with other agent if we want , for that we have to run some command through terminal and then we can easily watch the user interaction and also we can customize the time.

Benefits of Dyntrace

For Testing you should have lot of data and through which you can check your system health such as CPU, Memory, Disk and Network Utilization,Storage Problems

We can also look into the problem which are captured in dynatrace and then we can resolve those.

With the help of Dynatrace, developers and testers can ensure that their application works fast and is reliable.

We can capture the issues before client complains about the same.

HOW CAN WE EMBED TWO OR MORE COMPONENTS INTO ONE IN REACT?

How can we embed two or more components into one in React?

We can embed components into one in the following way:

1 class MyComponent extends React.Component{

2 render(){

3 return(

4 <div>

5 <h1>Hello</h1>

6 <Header/>

7 </div>

8 );

9 }

10 }

11 class Header extends React.Component{

12 render(){

13 return <h1>Header Component</h1>

14 };

15 }

16 ReactDOM.render(

17 <MyComponent/>, document.getElementById(‘content’)

18 );