SAP UI5,SAP Netweaver Gateway,ODATA & ABAP system Full Workflow required

Hi SAPUI5 Experts,

i am new to SAP UI5 ,SAP Netweaver Gateway ,ODATA and all these stuffs..

–> what is Actual flow to get data from ABAP system to SAPUI5 Eclipse webpage(where my page is created) and why BSP page is used and what is link up between SAP NET WEAVER GATEWAY,ODATA,XML all these Components.

Please help in getting a clean clarity soon on this ..

Thanks in advance to experts helping me !! -:)