react-native-maps with google

For one of projects that I’m working on these days had to use a map view to cover of up the requirements. I found out that react-native-maps is good plugin recommended everywhere which is initially started by airbnb.

With the various issues and changing requirements I had to go from tile based map to a google map. It’s really nice that this plugin could handle both types.

React-native at the moment does not support leaflet based mapping since lefalet directly manipulates dom which is not supported by react-native from the basics. react-leaflet does not supported to react-native.

Installing react-native-maps with google was quite troublesome where took a half day of me to figure it out properly.

Here are stuff I did from the start to setup google maps, because installation guide didn’t work for out of the box

1. react-native init {projectname} in command line (“0.42.0”)
2. cd {projectname}
3. npm install react-native-maps –save which will install react-native maps ( “^0.13.0”)
4. Do not run any linking commands
5. next step would be to react pod file with pod init
6. copy the linked content to pod file, change the {projectname} as mentioned, run pod install
7. yoga error then add the below line to pod filepod “Yoga”, :path => “#{react_native_path}/ReactCommon/yoga”
8. Close xcode, and open {projectname}.xcworkspace file in xcode
9. drag AirMaps and AirGoogleMaps to root of your project, and select create groups radio, don’t check copy items if needed
10. Create a google api key with iOS bundle id added to the key , this sync up take few minutes (wrong key will show you a google singed empty map) once you run
11. #import <GoogleMaps/GoogleMaps.h> and    [GMSServices provideAPIKey:@”{your_key}”]; lines to AppDelegate.m file top then inside didFinishLaunchingWithOptions respectively
12. Add below map view code, with out absolute positioning it will be white blank screen, with out key if you use google it will be goole logo with empty screen

Enjoy… react-native-maps google.

dealing the unknown mammoth

In competitive corporate environment it’s obvious at some point we all get some project or an assignment which is completely based on a subject or theory which is completely unknown and also sound quite big and exciting in same time. Manager or the client who describes about it knows little about it how it works inside but he wants it get it done with short time with working product with number of features? If you haven’t it will not take too long to reach some point like this in your career.

In the context of technological fields this is much common scenario people find so exciting to have the products which are benefited from the emerging technologies. As result of this employee’s days come harder and harder to meet the requirements of the projects with failing and risking their carriers. The most devastating fact is about these kind of projects the abstract explanation about the project is not broder enough to give in depth idea to about the scope and feature should have inside. Also rather this ideas sounds so exciting and interesting while pitching the value delivery of the product does have incompatibilities with business requirements as well. Most of projects fails in this backgrounds as well as end up adding more resources or time wastage to existing process.

Special most of startup ideas are like this few work out well most does not, but as person who got a project assigned to like this and there is no options rather than build it from the scratch following ideas may help you how to get through difficult days to come in the project.

First days of kicking off the project

Since things are unclear and sounds so big procrastination and the fear of failing with emerges within the few hours to you. This is so obvious that since the background of project that sound so unknown to you before, but that you have to master the subject in order come up with a successful product. This is so general set of feelings that one have to deal with therefore it’s good always to believe things will work out well and start with something small. Take baby steps.

Most of people endup with doing many rounds of research for first few weeks without having any valued output. So best way to deal with unknown projects is try to build up some understanding of the product and look thoroughly is there any divisible parts that you can identified. Once you get a pick on these small components works with in the project break it into much smaller components which you feels happy and easy to deal with. But always try to attach some value delivery to each of these components. Develop plan and shipping of each component, rather you don’t know how much time it will take just go with with your gut feeling it can be justified later. Having a timeline is much important than having lot of knowledge about a product. This will make you understand depth this project can go for. Research with this knowledge can make your researches much productive.

Think we are making a shooting robot which can fly. Idea is at least you know you have to have gun and flying machine. This is good start. Start developing a gun which can shoot with a less backfire which can help to stabilize the flying machine. Assuming gun can be made within a month and flying machine will take two months to build. Another three months for integration and testing. Research about guns how it can be made make something similar. Research on flying machines in depth can be push later when it matters in the timeline. Doing something what matters and getting into the project is most important at early stage project rather whole effort become throw away it matters you start doing something rather than thinking of endless possibilities.

Second stage

With the excitement and the motivation that you have in the start, slow start decaying with the time and get a stage where you have to pull things from external motivation. It’s normal this kind of a mind set will sneak in to you with the progression of the project if things are proving to be progress slowly. Build up routines is much important at this stage. Soon as you start doing something and the first time you have something get working make it a habit that you can repeat yourself and improve your approach with each component you build.

For this alway try to make your mammoth projects goal into small pieces which are more achievable and simple. Break things into small pieces which carries a some kind of value with the small job that you try to finish. The problem we encounter divide and conquer approach is people tend break things in the perspective of effort. What work out best in this context is to go with the value and break it down. In way at end of each point you achieve something small you have something to show up to your manager or client. Which is is good fact to showing the progress and always allowing to have changes what necessary. Buy doing this the best practical part is that the amount knowledge your client or manager is develop about the project and you can see exactly what client need very early stages of the each component or small value delivery point. This learning curve matters to both the parties.

Importance of keeping Client or Manager engaged

With the time rather you make positive or average progress, you have to keep things transparent about the approaches you are trying to make and how that will add value to the end product. This will save your job in long run rather whole output is not convincing. There’s a matter of fact the path lead final product is well known by the both parties. So the frustration that adds up knowing product is heading towards dead end before hand is much effective coming up with a failed product after 200 days of hard work.

This may be even can be defined as a useless time wasting sessions or meetings by the other party try to make this meeting fruitful as possible before hand preparing to the meeting and making the session really important too.

Progress sharing

Visibility of effort you put into project is much important in this context make things justifiable to both the parties. Kanbanflow or Trello like tools can be real handy simple sharing managers that can help you keep let your client or manager see how you deal with the Unknown Mammoth and exactly is your effort is pointing towards the abstract idea that saw within inside them.

There are many things about your approach and the project progression  cannot be  explained via verbal discussions in meetings but where  micro blogging or small diagrams with these sharing tool can explain much effectively to other party engaged in the project. Using some knowledge mechanism tool with hand in hand proven to be much effective.

Handling expectations & new requirements

For a moment if things goes well may be client or manager will make up picture that this is the time to bring improvements. This is happen mostly soon as you build positive progress towards end product.

To be honest most of projects start going haywire with this kind of nonstop requirements that comes in the middle stages. Try to keep the requirement logs of the project frozen if isn’t the the idea is really really important. Other than make them in the next version. It’s ok go with a minimal set of features for initial version of project with the time things can be develop.

Give the manager or the client the understanding the that a product you build is a one hit stop it can take improvements and this is the time that you trying get thing up and running and you are not with idea of adding new requirement. Since rather adding new things keep manager or client happy will not work for both the parties in long run. Best way is to stand in you view in formal way and with facts in hand and in same time handling the expectations of the other party.

Quality Assurance

With these kind of projects very few percentage that reach a coast successfully projects are not proven to be products that can be sell at the very beginning. Lack of understanding of this aspect make people think they can go out there to real world and sell the product soon as they shipped. Making client known of this possible landmine can help you to retain your client or manager and also keep things moving forward.

From the very early stages of the project’s quality should be maintained where deliverable components should be quality checked at very early stages. Only because quality maintenance process have make bigger companies have make successful products back to back. This is important point where most lack of knowledge when it comes to internal organizational softwares development as well. Quality is aspect any product development life cycle should plan with care.

Making things into rigid flow

Rather things start small within your control of you with this project when they become success with your sleepless nights of hard work it will grow only have proper flow of scaling. So once you see other corner of light of the dark tunnel try make things much process oriented cycles which can repeat again and again with less effort. This process with help to streamline the shipping of good product you come with.

Proper flow of work process make thing more manageable.

Last words

Working with projects with unknow contexts is quite good skill to develop specially in technological fields. Above are few tips will help for someone starting to work with unfamiliar bigger project. It’s better to understand that this is a risky process to involved in end up in success or failure depending on many facts including your commitment. There’s no replacement for commitment. Still having a overview how things can end up is quite help full every stage of the project.

Please share your ideas how things work well for you dealing with these big black boxes.  

event loop in javascript context

Event loop is much important concept to be understand exactly to get best out of Javascript. Without knowing event loop programmers can work on javascript but when it comes to higher degree of interactivity and smooth client interaction as your application grows event loop is a concept that Javascript developers have to master. There are many posts we can get the understanding of event loop. In beginning there are few prerequisite concepts that one have to grab before hand to understand end to end workflow of event loop.

Bit of history

Before coming directly to Javascript event loop and how it work it’s better if we consider the history of event loop at it’s early days since it make things much more clearer. Event loop is programming construct that systems implemented technique used message passing.

Event loop is the program construct wait event to occur and dispatch the occurred event with designated event handler of the particular event.

Going further into history this pattern was in need when things advanced to GUI based applications from one time executed command line based programs and form menu driven programming. Above two application types are less interactive to the users. But with the much interactive applications programs needed handle multiple processes for I/O bound operations as well as system related. Single event handler waiting to free resources were not supporting this kind of a interactivity. Usage of the event loop program construct allowed programs to wait until events to occur and add it to a pool letting those events to be handle by a another program, at same time giving user to go forward with the interacted workflow with out blocking most of the time. To further master OS level event loops there are more relevant posts can be found.
With having some idea about event we’ll move forward what really event to loop have to do with javascript. Javascript has two main context front-end based implementations and server side implementations.

Since most of us take the advantage of browser level Javascript, here as an example Chrome browser Javascript rendering can be much practical. The knowledge gain by that can lead us to understand even how nodejs works in server side too.

Rather Javascript is single threaded language, how really browser handle concurrent user interactions with a application? Behind the scene Javascript runtime only can do one thing at a time. But there are several component help Chrome to execute Javascript concurrent manner in the browser.

V8
In Chrome V8 is the Javascript rendering engine with directly compiles Javascript in to machine language instead of intermediate bite code. This increased browser performance in way Chrome with V8 engine won the browser war with firefox, safari & IE  with a par lead user base.

Call stack
Call stack is the place where browser keep the listing of records where is the current execution happens in the program,  which is recorded in a stacked data structure. So a simple console.log(“Hello world..!”); Directly pushed on to the Call Stack an immediately get executed and pop from the top of the stack. Simple but a effective way of handling the execution of a list of function. Once function is identified it get pushed to the top of the call stack, then once it’s executed it’s  removed or pop from the top of the stack.

Web APIs
Web API supports browser to additional features, like DOM, Ajax, Set time out. These API component can not be controlled or access or overwrite but which can be call using javascript API calls.

Callback/task queue
Callback queue is a list of tasks coming through Web API which are waiting to be pushed into the Call stack to get immediately executed. But this keep wait until Call stack is empty.

Event loop
With above components where event loop can fit inside the browser. When describing the Callback queue there’s a need interlink in between Call stack and Call back queue. Where a component can check weather Call stack is empty and push the Call back queue tasks in to Call stack if stack is empty. So this is repeating process where  this check and push process take place. Design methodology of event loop fits well to serve this need when executing Javascript in the browser.
Exact thing event loop does is constantly looking for Call stack to get empty and if it’s empty push new tasks into the Call stack from the Call back queue.

Why we want to know Event loop?
Getting to know how event loop exactly work helps developer get the applications responsive in higher degree of user interaction and also avoiding unexpected behaviour of application front end. Rather we don’t have controller over event loop proper basics can lead a developer toward better code where execution meets the expectations. Where reduces frozen GUI or lagging GUI as well as unexpected order of execution.

Server side context
Pretty much the same way that we can explain nodejs related event loop also works pretty much the same way difference is instead of Web API nodejs access C++ API. Event loop does the same fetch tasks from the queue and dispatch the event with the handler.

Code works

#1 sample

(function (){
console.log(‘Hello World..!’);
})();

Explanation :-

• task directly recorded to call stack and get executed

#2 sample

(function(){
setTimeout(function(){ console.log("Delayed Hello"); }, 3000);
})();

Explanation :-

• task record to call stack
• call stack execution calls setTimeout in browser API
• wait for 3 seconds since timeout is 3000
• add task to call back queue
• if call stack empty event loop push task to call stack

#3 sample

(function(){
console.log(‘Hello ’);
setTimeout(function(){ console.log("Just after Hello"); }, 0);
console.log(‘World..!’);
})();

Explanation:-

• console.log(‘Hello ’) push to the call stack
• log “Hello” to the console
• setTimeout push to call stack
• Call setTimeout browser API
• Add task to task queue
• same time console.log(‘World..!’) push to the call stack, because of this above console.log(“Just after Hello”) can’t enter call stack because it’s not empty
• Execute console.log(‘World..!’) in Call stack
• Now Call stack is empty can execute console.log(“Just after Hello”)

Important
Javascript execution asynchronously keep pushing event to the call stack, there for at the time setTimeout called console.log(‘World..!’) get push into the Call stack, therefore it execute immediately, then event loop get the chance to put a event push in the Call stack since it’s empty.
Another important point is to know setTimeout not clearly defines this the time of execution possible minimum delay is only guaranteed.