The Javascript Libraries/packages worth you spend time to know (part 1)

Recently I searched for the most popular programming languages, and I am surprised seeing that JavaScript is still the #1 languages in the list. Although I am a .NET developer, but I have been using JavaScript for many years. My original thought was that only OOP languages like c, c++,Java, c#, etc are called “Programming language”, because all these languages are high-leve, strongly typed, object-oriented, they share a strong, well-defined libraries out-of-box can be used, and they all run on server-side and can be used against multiple-purpose, they are called “advanced programming language”.  the languages like JavaScript is only “low level” language, it is weakly typed, doesn’t have rich built-in libraries, and its main purpose is manipulate HTML, which is used by none “Programmer”. However things seems changed completely since the introduction of Node.js. Since I learnt node.js few years ago, these original “thought” changed me completely.

What makes the JavaScript so powerful in recent years? the answer is Libraries. because JavaScript is open-source, tons of libraries, engines based on JavaScript were built in an amazing speed. Just because the simplicity, weakly typed, prototype-based of the JavaScript, the Libraries build on top of it can be really powerful. Here is a list of JavaScript Libraries: List of JavaScript libraries, on top of these libraries, there are lots of JavaScript packages can help you to achieve more quickly and easily. These packages pack some reusable commonly used functionality together and provide an easy-to-use interface and document for any JavaScript programmer in the open source community.

Here are the most popular JavaScript Libraries/Framework (2017-2018) worth you spend time to know it.

1. ReactJS and React Native

ReactJS is obviously the most popular and fastest grown library. It was originally developed by Facebook, and published to open source in 2013. It is used for building user interfaces specifically for single page applications. The benefit of React is it can be used to create large web applications which can change data, without reloading the page. It is fast, scalable, and simple. It works only on user interfaces in application, so it can be worked with a combination of other JavaScript Libraries, such as AngularJS, Node.js, or ASP.NET MVC.

React Native library were announced in 2015, which provides the react architecture to native mobile applications for iOS and Andriod. It enable user with JavaScript background can build mobile application for iOS and Andriod with one shared code base, but build native iOS and Andriod application. More important, according some analysis and comparisons, the performance of React Native apps are as good as the apps build by using C++/Swift in iOS and Java in Andriod. It is a great choice for cross-mobile-platform, high performance, limited-budget apps.

2. Angular JS

Compare with ReactJS, angular has been around for many years, angular is a much fuller featured framework compared with react. the set up code for angular is a little verbose. even through i was a big fan of Angular, I have almost completely abandon it since I started to use React, since React can do pretty much anything Angular can do, and having the advantage of performance, easy to use, quick to setup, easy to implement, and big time saver. Here I am not going to spend time on Angular, from my opinion the only reason you will adopt Angular over React is because you already well-educated in Angular and don’t have big learning curve, and is well deep-dived in the angular community.

3. Meteor

Meteor is a cross-platform, open source JavaScript library wirtten using node.js. it allows for rapid prototyping and produces cross-platform code (android, iOs, Web). It integrated with MongoDB and uses the Distributed Data Protocol and Publish-subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code.

4. Knockout

Knockout is the first JavaScript framework I learnt to build dynamic data two-way data binding web pages. It was so powerful and easy to learn that it quickly earn a large number of developers. It is implemented in the Model-View-ViewModel pattern, so it clearly separate Damian data, view component, and data to be displayed.

Compared with angularjs and react, knockout is like a lightweight angularjs. It doesn’t have lots of features like routing, etc, but it can be achieved by using third party libraries. From the performance perspective, knockout is the slowest From this speed comparison between angular, react, and knockout . It may not necessary to learn knockout at this time since we have much better options, but it is still a very good lightweight library, especially good for the web site only need a dynamic loading pages for existing sites, or built on top of asp.net mvc with only a few pages need asynchronous data loading.

5. Vue.js

Vue is another framework has been gaining rapid progress in the recent years. It adopt the advantage of both react and angular, providing similar roles as the react – playing the V in MVC model. It need to work with other libraries together as a Full-stack JavaScript framework. Because it works in the “view layer” only, it makes it can be easily integrated into other projects/libraries.

Compared with AngularJs, Vue is one-way data binding, and AngularJs is two-way data binding. One-way binding give the developer more controls on how the DOM object is updated, which in turn will increase the performance.

Up coming next

In the next part, I will talk about the JavaScript packages which are very helpful to avoid you to re-invent the wheel.

Advertisements

how to use Keys in React Dynamic children the right way

Recently I was stuck in a react component which children components doesn’t update no matter how I set the state or props. I eventually find the solution is really easy and simple: set the Key value unique across the parent context all the time.

Problem:

The issue can happen in all cascade drop down scenarios. For example, the parent dropdown is a list of countries, and the child dropdown is a list of cities. If the country drop down list changes, the cities drop down should reload with the corresponding country’s cities. However once the cities drop down option changed, it will always keep  the current selected status when I change the countries drop down.

Solution:

The solution is pretty simple: always make sure the Key value in the child list unique across the countries, not just the current selection.

Case study:

My previous thought was that just make the the Key value unique, and the simplest way is just pass the index of the child children array, and it works in most cases, as long as you don’t have a cascade dropdown. and it is true in that case. However in the cascade drop down scenario, the index is not unique across parent drop down selection, which means the child index 1 of city New York in the drop down for United State, is not the same for London for United Kingdom. If the index of the array is still passed to child dynamic list, it will cause the child component think it’s the same component as its previous one, so just leave it and don’t update the child component. In my scenario, I just need to pass the id of country and id of city as the Key value, and it fix the problem.

Lesson Learnt:

  1. React can only determine child dynamic component based on the Key
  2. always make sure the Key is unique across the parent component, not the current selection

cors for rest web api

to add support for CORS

  1. install package
    Install-Package Microsoft.AspNet.WebApi.Cors
  2. add to WebApiConfig.Register method
    config.EnableCors();
  3. To enable CORS for all Web API controllers in your application, pass an EnableCorsAttribute instance to the EnableCors method:
     var cors = new EnableCorsAttribute("www.example.com", "*", "*");

In the case you have token oauth authentication for rest web api, fix the pre-flight request cors issue:

  1. Move the code to the first line Startupapp.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
  2. REMOVE  context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); from the GrantResourceOwnerCredentials()

 

reference:

 

Sideloading of apps is not enabled on this site

If you are deploying a solution/ sharepoint apps to sharepoint, at some point, you will likely come across this error: “sideloading of apps is not enabled on this site”.

so with this error, you won’t be able to deploy apps to sharepoint on-premise or online. to fix this issue, we have two different approaches for on-premise and online.

  1. on-premise server with full control

Enable-SPFeature e374875e-06b6-11e0-b0fa-57f5dfd72085 –url http://sp.contoso.com

2. sharepoint online

It is 2-steps solution for sharepoint online

  1. download and install sharepoint online management shell
  2. execute the script below
#CODE STARTS HERE
$programFiles = [environment]::getfolderpath("programfiles")
add-type -Path $programFiles'\SharePoint Online Management Shell\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.dll'
Write-Host 'Ready to enable Sideloading'
$siteurl = Read-Host 'Site Url'
$username = Read-Host "User Name"
$password = Read-Host -AsSecureString 'Password'
 
$outfilepath = $siteurl -replace ':', '_' -replace '/', '_'
 
try
{
    [Microsoft.SharePoint.Client.ClientContext]$cc = New-Object Microsoft.SharePoint.Client.ClientContext($siteurl)
    [Microsoft.SharePoint.Client.SharePointOnlineCredentials]$spocreds = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $password)
    $cc.Credentials = $spocreds
    $site = $cc.Site;

    $sideLoadingGuid = new-object System.Guid "AE3A1339-61F5-4f8f-81A7-ABD2DA956A7D"
    $site.Features.Add($sideLoadingGuid, $true, [Microsoft.SharePoint.Client.FeatureDefinitionScope]::None);
     
    $cc.ExecuteQuery();
     
    Write-Host -ForegroundColor Green 'SideLoading feature enabled on site' $siteurl
    #Activate the Developer Site feature
}
catch
{ 
    Write-Host -ForegroundColor Red 'Error encountered when trying to enable SideLoading feature' $siteurl, ':' $Error[0].ToString();
}

#CODE ENDS HERE

Run the code as shown below, enter the site url with username nad password for your sharepoint online, the powershell will take care of the rest for you.

enable-sideloading-sharepoint-online_thumb

VS 2015 Package Manager Console Failed

Opening package manager console produce the error message:

“Windows PowerShell updated your execution policy successfully, but the setting is overridden by a policy defined at a more specific scope. Due to the override, your shell will retain its current effective execution policy of Unrestricted. Type “Get-ExecutionPolicy -List” to view your execution policy settings. For more information please see “Get-Help Set-ExecutionPolicy”.”

A temp fix is update the regedit

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\PowerShell]
"ExecutionPolicy" set to empty

Restart the VS 2015 should fix this issue

How to make AJAX Call from POSTMAN

There are two types of RESTful Web Service methods can be consumed by ajax call: HttpPost and HttpGet.

for HttpGet, it’s pretty simple, all we need to do is add querystring parameters to the URL.

for HttpPost, if the Rest web service method take an object as parameter, we will need to construct the object as JSON and pass it in the body of the request. A key element to get it working is to add Content-Type: application/json to HEADER section.

Do NOT check Email first thing in the morning

Ignorance is Productive

When it comes to email, ignorance is bliss. That’s why if you’ve got something important you want to make progress on, I have these four words for you:

Don’t Check Your Email

as soon as you get up, work on something important for 30-45 minutes, and only then check it. If you can stand it, wait even longer.

And you know what? As long as you’re ignorant of everything else that’s going on outside, you can concentrate on what you want to work on.

Any new information you get can cause you to get distracted. On a quick tangent, this is also why I often don’t look at any news in the morning, don’t turn on the TV, and listen to audiobooks or even educational podcasts instead of the radio in my car – I don’t want anything to distract me. I can’t control everything but I can control my own.

It’s not Your Todo List

Do you know what is most important for you to work on? Do you know the first thing you want to do this morning? Then go ahead and do it!

On the other hand by checking email, you risk doing what someone else wants you to do. Every time you open an Email, you should consider whether it’s more important than everything else on your task list – but realistically, how many of us actually do that?

If you don’t, then the items you end up working on (even if it’s just replying and giving information) end up being tasks for other people rather than yourself.

Or more bluntly, when you check your inbox, the emails you get are a todo list someone else makes for you.

So, Who is in charge of your time – you, or the person emailing you?

It’s an excuse to Lack Direction

“Why are you checking email first thing in the morning anyway?”

Most likely the answer could be “you don’t know what you are supposed to be working on”

I am certainly not immune to this myself. If I am checking my inbox too often, that’s frequently an early warning sign that my todo list has gotten off track somewhere.

The real problem behind this behavior is that you don’t see checking email as a low priority activity, because you haven’t decided what the high priority activities area are. when you don’t have a clear list of priorities, checking email becomes an urgent activity that you do, but at the expense of your important ones.

If this strikes a nerve with you, don’t worry – it can be fixed. Find out Urgent versus Important time management matrix, and stop checking email so frequently.

Reaction or “Proaction”

when you check your email, the best case scenario is you checked at exactly the right moment, just when a super important email came in – and you can take instant action right away. How often does that actually happen? Rarely

The usual case is that, when you turn on your “check email” mode, you end up with more work to do, by replying emails regardless of their true priority.

I prefer taking proactive actions – what I call proaction. Work on the things that are important to you, regardless of whether they’re urgent or simply at the top of your inbox.

Searching for Excuses

If I’ blindly checking email, I am usually not checking for anything important – I am usually searching for an excuse to not do the work I know I must do.

I am searching for any reason why I can tell myself later I didn’t get the work done that needed to be.

Don’t fall in that trap. Don’t give yourself an out by checking your email for an excuse to fail.

It builds Expectation

A lot of people tell me “But I have to check my email! People expect a response from me”

First of all, I don’t believe it. If they do urgently awaiting your response, there are surly lots of ways to reach you, by phone, by visiting, by calling your colleague.

The more often you check email, the more often people will expect you to check it. and that’s the reason why people are EXPECTING response from you.

Just stop checking it first thing in the morning, and people won’t expect it anymore.

I know, it’s easier said than done. Don’t worry, after the first week or two, nobody will think anything of it.

Of course, there are causes you must check your email. well, if you do, constrain yourself to only check a limited subset of email, and I recommend you follow these rules

  1. Only check if there is something specific you are looking for or awaiting for
  2. Separate low value emails
  3. Set a time limit. Commit to checking for 5 minutes, just to look for that one piece of information, and you are done. before you open your inbox, decide what you will do if 1)the email is there 2)the email isn’t there 3)the email is incomplete. Don’t be reactionary – proactively decide what action you will take based on the outcomes you expect.

reference: http://sidsavara.com/personal-development/do-not-check-email-in-the-morning

IoT: Monetizing the Internet of Things

IoT continues to evolve at a rapid pace, right in front of our very eyes. Supoposely,

  • By 2017, an estimated 90M people will live in smart homes.
  • By 2020, 50B connected devices is IoT

but there are challenges, especiallyu when it comes building a recurring revenue model that allows you to stay agile, respond to your market, and scale products quickly and successfully.

IoT is clearly the near future of business. But as we quickly progress into our increasingly digitized world, one that concentrates on connections – wireless, virtuals, etc. It’s super critical to focus on a solid business model will ensure your business gets a smart start on the right track.

the questions you have to understand and answer before you made any possible success in IoT

  1. How, if done right, IoT could mean massive growth opportunities for your business
  2. How can you successfully conquer the challenges of integrating products and services
  3. How companies like Nest, Honeywell, and Lowe’s have built powerful business models

the control collection cannot be modified during databind

In SharePoint, this error appears to be a visio web access web part, or Nintex workflow issue, is due to a “detail” of the master page applied.

the master page shows the control SPWebPartManager in the HEAD insteead of the BODY.

A start point on fixing this is move the SPWebPartManager control to body part in your master page. It works for me, in the case of Nintex workflow cause the issue.

error1

Three pits on your way to setting up your business

I see lots of startups showing off their thoughts and sentiment, different style in quite significant way. some are heroic, some are coziness, some mooching, some solemn and stirring, and some are desperate. starting up a business is like marriage, looks great by stranger, but only the startups know what they have been through.

It’s been three years since my second startup, and I would like to talk about the starting up from my point of view. I divided the startup to three phases: the first phase is the first three month, and the second phase is the first year, and the third phase is the first three years. Normally if startup is still alive after three years, and have some reputation in the market, then this business has pass it’s critical stage, and start its next stage: growing stage. At this stage the business is not easy to die, but whether it can grow big, all depends on the industry and this business’ characteristic.

This first phase, i.e. the first three months, at this phase the startup only have an idea, no products have been formed yet, not even going though the market test out. The startup is just like a new solider, all day excited and vigorous. The startup either focus on products, contacting potential customer, or writing business plan, contacting investors. but all in all, the startup is very active and efficiency.

If thing goes well, after three months, the product should beginning to take shape, and got some investment if lucky. Now it’s time to start testing the product, and normally come with two outcomes: one is the product is very popular, although the probability is very small; another one is common situation, which it’s realized that it’s not as good as expected. the startup will experience their first strike, and part of startup will chose to quit, the others will chose to uphold their faith, and continuing to improve their products, or pick another direction to try again.

After the first three months, very few startup begin their fast growing phase, and these startup feel coziness and start feel it’s easy like piece of cake! but unfortunately most startup not that lucky, they start facing difficulty, and start realize that starting up a business is not as easy as they imagined. They must keeping amend and revise their products or business model, before they can survive in the market.

Keeping doing that for one year, few luckier become the rising star. They start the first round investment, and joining all sort of presentation, doing marketing through all different channels. However a majority of startups start fall in to mooching. It seems they are always one step behind after they have tried a few products and business models, and they don’t have too much room for any further improvement after the cash flow is tighter and team is under higher pressure. At this time, another wave of startups choose to quit, and the rest choose to keep fighting and searching for new direction.

From the first year to the third year, there is no big changes for these two years compared with the first year. If the business is still alive, it means the business has found it’s direction. They have successfully pull through infancy stage, and begin their preschool period. The products is in an early form, and have some reputation in the market, but the team begin to having problems. Because the rapid growth didn’t come together with management prompt, most startups don’t have management experience, or even despise the important of management and think management is equal to bureaucracy, the business start growing pain.

Statistically speaking, the average life of a business is 2.5 years, which means at least 50% of business can’t survive more than 2 years. It is hard to believe but it’s brutal truth. Before these business die, they will experience the most difficult phase –  solemn and stirring, and then becoming desperate. Some co-founders choose to quit and go back to big companies, or choose to pick next project. Only these startups insist can survive and growing, with lower profile.

I would like to say congratulation after three years, but don’t get excited too early, another three big challenges is awaiting: startups feel powerless in management, the co-founders are falling behind. Even through the business strategy is clear, but it’s always hard to carry out because lots of details issues start emerging. the organisation start facing problems from different facet, and always short on skilled resources, recruitment and keeping people is getting harder and harder. Organisation regulation become falling behind the business growth. Now the business face another transition.

If you think your business having lots of issues, don’t be depression, because lots of business having the same amount of issues. Keep in mind identifying and focusing on the few fatal issues, which can make your business survive. and then you can resolve other issues slowly during your development. The process of business growing is the process of solving problem, and it’s also the process of startups self-improvement and self-growth.

If you always have growth pain, it’s not a bad thing, because only live people can having the pain.