Sunday, 4 November 2018

What are MVP and MVC and what is the difference?

Let me provide  difference between MVP and MVC ,

Model-View-Presenter

If we are talking about In MVP, the Presenter contains the UI business logic for the View. All invocations from the View delegate directly to Presenter. The Presenter is also decoupled directly from the View and talks to it through an interface. This is to allow mocking of the View in a unit test. One common attribute of MVP is that there has to be a lot of two-way dispatching. For example, when someone clicks the "Save" button, the event handler delegates to the Presenter's "OnSave" method. Once the save is completed, the Presenter will then call back the View through its interface so that the View can display that the save has completed.
MVP tends to be a very natural pattern for achieving separated presentation in Web Forms. The reason is that the View is always created first by the ASP.NET runtime. You can find out more about both variants.

Two primary variations

Passive View: The View is as dumb as possible and contains almost zero logic. The Presenter is a middle man that talks to the View and the Model. The View and Model are completely shielded from one another. The Model may raise events, but the Presenter subscribes to them for updating the View. In Passive View there is no direct data binding, instead the View exposes setter properties which the Presenter uses to set the data. All state is managed in the Presenter and not the View.
  • Pro: maximum testability surface; clean separation of the View and Model
  • Con: more work (for example all the setter properties) as you are doing all the data binding yourself.
Supervising Controller: The Presenter handles user gestures. The View binds to the Model directly through data binding. In this case it's the Presenter's job to pass off the Model to the View so that it can bind to it. The Presenter will also contain logic for gestures like pressing a button, navigation, etc.
  • Pro: by leveraging databinding the amount of code is reduced.
  • Con: there's less testable surface (because of data binding), and there's less encapsulation in the View since it talks directly to the Model.

Model-View-Controller

In the MVC, the Controller is responsible for determining which View to display in response to any action including when the application loads. This differs from MVP where actions route through the View to the Presenter. In MVC, every action in the View correlates with a call to a Controller along with an action. In the web each action involves a call to a URL on the other side of which there is a Controller who responds. Once that Controller has completed its processing, it will return the correct View. The sequence continues in that manner throughout the life of the application:
    Action in the View
        -> Call to Controller
        -> Controller Logic
        -> Controller returns the View.
One other big difference about MVC is that the View does not directly bind to the Model. The view simply renders, and is completely stateless. In implementations of MVC the View usually will not have any logic in the code behind. This is contrary to MVP where it is absolutely necessary because, if the View does not delegate to the Presenter, it will never get called.

Presentation Model

One other pattern to look at is the Presentation Model pattern. In this pattern there is no Presenter. Instead the View binds directly to a Presentation Model. The Presentation Model is a Model crafted specifically for the View. This means this Model can expose properties that one would never put on a domain model as it would be a violation of separation-of-concerns. In this case, the Presentation Model binds to the domain model, and may subscribe to events coming from that Model. The View then subscribes to events coming from the Presentation Model and updates itself accordingly. The Presentation Model can expose commands which the view uses for invoking actions. The advantage of this approach is that you can essentially remove the code-behind altogether as the PM completely encapsulates all of the behaviour for the view. This pattern is a very strong candidate for use in WPF applications and is also called Model-View-ViewModel.
You can now do this in most "modern" browsers!

you can do this to your success action :

window.history.pushState("object or string", "Title", "/new-url");
Additional Note:

  1. The first parameter is the data we'll need if the state of the web page changes, for instance whenever someone presses the back or forwards button in their browser. Note that in Firefox this data is limited to 640k characters.
  2. title is the second parameter which can be a string, but at the time of writing, every browser simply ignores it.
  3. This final parameter is the URL we want to appear in the address bar.

You can achieve via AJAX also,


$(".urut").change(function() {
  $.ajax({
    url: "<?php echo base_url(); ?>categories/brand/<?= $link_brand; ?>?l=<?= $l; ?>&h=<?= $h; ?>&city=<?= $city; ?>&city_name=<?= $city_name; ?>&ket=view",
    type: "POST",
    data: "urut=" + $(".urut").val(),
    success: function(data) {
      $("#result").html(data);
    }
  })
})
Do comment, and let me know if you face any issue.

Monday, 29 October 2018

Visual Studio Code for front-end developers | Visual Studio Code Can Do That?

Visual  studio code for newbie or a seasoned developer, code editor is an imperative part of your work. The problem, especially if you are a beginner, is that there are tons of choices for IDEs. And many of them share similar features, functionalities, and even UI. As a result, choosing the right IDE might actually take more time and effort that you thought.
If your question right now is: “which code editor should I start with?” then I would reply: “It depends, my friend.” Choosing a particular IDE significantly depends on a few factors: what type of developer you are, what kinds of environments you mostly work with, or whether you have an exclusive built-in feature that you absolutely need to get jobs done.
The main purpose of this blog is not to compare different IDEs, but to discuss my experience with VSCode. So in this post, I will:
  • show a brief introduction to VSCode
  • introduce the particular theme I’ve installed
  • discuss helpful extensions I use
  • show you how I leverage VSCode’s features to enhance my workflow.
Let’s get into it!
  • HTML Snippets: add rich language support for the HTML Markup such as auto-close tags.
  • JavaScript (ES6) code snippets: pretty self-explanatory
  • Live Server: launch a local server with live reload features for your HTML or PHP site
  • Markdown Preview Enhanced: run live server for your markdown file.
  • Material Icon Theme: provides icons based on Google’s Material Design. To activate, click Setting => File Icon Theme => Select Material Icon Theme
  • Prettier: beautifully format your JavaScript/ TypeScript/ CSS code.

Things I wish I’d known since the beginning

Apart from these themes and extensions, I would like to share with you how I use VSCode’s great features to boost productivity. These are all things that I didn’t know as a beginner, and that would’ve been very helpful for leveraging and facilitating my workflow.

Integrated Terminals

It is kind of inevitable that the more time you are in software development, the more important the Terminal becomes. As a JavaScript developer, I use the Terminal to install packages, run the development server, or even push changes in my current repository to GitHub.
VS code is light weight open source code editor. use it and enjoy it..

Sunday, 28 October 2018

Node npm ENOSELF error - installing a package in its package in branch RxJS package

I was facing issue while installing node packages,

Please review error  screenshot as well,





SOLUTION  : just rename package.json file with package1.json and start executing your package command.
To fix that, open your package.json file and change/rename the name of the project.

Error was faced during package installation  as below :
$ npm install rxjs webpack webpack-dev-server typescript ts-loader


try out with this:
$ npm install webpack webpack-dev-server typescript ts-loader

if you face same issue, just rename package.json file as per my comment and execute your package it will create automatically new package file.


Sunday, 19 August 2018

Switching from Google Maps to OpenStreetMap (Google map no more Free)

As you probably notice, Google Maps API started to be paid solution on July 16th, 2018. There is nothing wrong with it, we are paying for all features that are developed by the Google team. But what if you are an owner of the simple website and you just want to display a piece of the map with the location of your office? You can use OpenStreetMap.

Is it just that easy?

Below you can see the whole code required to create a map, position it, place a marker and create a popup with the office address.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
  5. <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  6. </head>
  7. <body>
  8. <div id="mapDiv" style="width: 800px; height: 500px"></div>
  9. <script>
  10. // position we will use later
  11. var lat = 40.73;
  12. var lon = -74.00;
  13. // initialize map
  14. map = L.map('mapDiv').setView([lat, lon], 13);
  15. // set map tiles source
  16. L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  17. attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  18. maxZoom: 18,
  19. }).addTo(map);
  20. // add marker to the map
  21. marker = L.marker([lat, lon]).addTo(map);
  22. // add popup to the marker
  23. marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
  24. </script>
  25. </body>
  26. </html>
What have we done?
We used the Leaflet library to handle map displaying. In the example above, in the head section, I used the hosted version of the CSS and JS files, but you can download it on your server and host locally. In the body section, you can see the div element of id “mapDiv” which is configured to be 800 pixels wide and 500 pixels high.
The rest of the magic is simply placed in the script. At first, we are setting the latitude and longitude of the point we want to put the marker on (and this will be also the center of our map). Next, we are creating the map, which will be placed in our “mapDiv” element, centered on the position we have chosen and zoomed to level 13. You can change the zoom level to better fit your needs.
The important thing is the map source configuration. There are various map sources you can use, but in this example, I want to keep things straight so I simply configured OpenStreetMap tiles as the source. Please note that you have to keep copyright information in such a case.
We almost finished. Now we can place the marker on the map (on the latitude and longitude configured before). As the last step, we are placing the popup with the information about our company.

Is this really all I need?

This is the basic usage of Leaflet with OpenStreetMap. The Leaflet library, however, is much more powerful. You can draw on the map, place various objects, react to the events – you will find much more information in the Leaflet documentation.

Geolocation

The Leaflet library does not contain any functions to perform geolocation based on the address string. If you want to perform such operations, you should take a look at OpenStreetMap Nominatim API. It allows you to search using named locations (by street names, cities etc) and not named locations such as stores, pubs etc.

An alternative – static maps

There is also one more alternative worth mention. If you don’t want to deal with the JavaScript code and libraries, you can simply use static maps displayed as an image on your site. There is nice static map generator available.