React at Statkraft

This talk will show the journey from internal web applications to public facing B2B sites using React. We will take a look at how decisions and experiences made on the way influenced where we are today. We will look at some patterns that were used and what we think worked well and what didn't.

Presenter: Esser Alexander
===================================================== Follow us and join our Slack community:
- ReactJS Norway's site: http://bit.ly/2ka4hC8
- Facebook: http://bit.ly/2kxmHxW
- Instagram: http://bit.ly/2kpysnJ
- Twitter: http://bit.ly/2kaehvl
- Youtube: http://bit.ly/2kANuJl
- Slack Community: https://goo.gl/YwUUKJ

Sponsored by Stooic Labs (http://bit.ly/2oTE4dF)

Organizer: Domenico Solazzo (http://bit.ly/2jRxj8j)

Transcript

1. REACT AT STATKRAFT Feb 2018 – Alexander Esser
2. 1 2 3 2 How We Use React Our Web Development History About Statkraft AGENDA
3. 3 1 ABOUT STATKRAFT
4. PROVIDING PURE ENERGY Statkraft’s ambition is to strengthen the position as a leading, international provider of pure energy competent responsible innovative
5. Statkraft’s global presence NORWAY 13 946 MW ZAMBIA 8 MW SWEDEN 1 770 MW GERMANY 2 692 MW TURKEY 122 MW BRAZIL 263 MW Statkraft SN Power INDIA 112 MW NEPAL 28 MW THE PHILIPPINES 146 MW THAILAND SN Power office LAOS 50 MW PANAMA PERU 362 MW CHILE 185 MW THE NETHERLANDS UK 279 MW FRANCE SINGAPORE SN Power office SOUTHEAST EUROPE USA San Francisco 9 MW ALBANIA 72 MW Installed capacity 19 270 MW Power production 66 TWh 97% renewable energy 3 800 employees 5
6. Norway 69% Nordic region excl. Norway 8% Europe excl. Nordic region 16% The rest of the world 6% Hydropower 82% Wind power 5% Gas power 14% Key figures 2016  Power generation: 66 TWh  Installed capacity: 19 270 MW  EBITDA*: NOK 13.8 bn  Total assets: NOK 167 bn Geography** Technology** ** Generation capacity 6 * Earnings before interest, taxes, depreciations and amortization
7. 7 Strategic directions EUROPEAN FLEXIBLE GENERATION EUROPEAN FLEXIBLE GENERATION MARKET OPERATIONS MARKET OPERATIONS DISTRICT HEATING DISTRICT HEATING INTERNATIONAL POWER INTERNATIONAL POWER INTERNATIONAL POWER WIND POWER WIND POWER NEW BUSINESS DEVELOPMENT NORWAY NEW BUSINESS DEVELOPMENT NORWAY
8. A century of experience  Statkraft’s history is tightly linked with the development of hydropower generation in Norway  Power plants and business operations date back as far as the end of the 19th century 8
11. Main Processes 11 Data gathering Hydrological analyses & forecasts Water values Spot bidding Production planning Production follow up Price and production forecasts – short and medium term Price and production forecasts – long term
12. Agile utvikling med Scrum/Kanban 12
13. 13 2 OUR WEB DEVELOPMENT HISTORY
14. Snowman 14
15. SpotOn 15
16. Spotless – Planning 16
17. 17 3 HOW WE USE REACT
18. Demo Customer Portal Nordic 18
19. Building blocks  React / Redux based on create-react-app  Structuring code by «Application»  TypeScript  Split between web and api  Handsontable  Highchart  Styled components 19
20. Our impressions so far  React/Redux require a “different” mindset  We should have planned the application store better  Implementing handsontable in a React/Redux friendly way  TypeScript got our back when refactoring  Split between web and api  20
21. www.statkraft.com THANK YOU alexander.esser@statkraft.com