React at Statkraft - Speaker Deck

Slide 1

Slide 1 text

REACT AT STATKRAFT Feb 2018 – Alexander Esser

Slide 2

Slide 2 text

1 2 3 2 How We Use React Our Web Development History About Statkraft AGENDA

Slide 3

Slide 3 text

3 1 ABOUT STATKRAFT

Slide 4

Slide 4 text

PROVIDING PURE ENERGY Statkraft’s ambition is to strengthen the position as a leading, international provider of pure energy competent responsible innovative

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Agile utvikling med Scrum/Kanban 12

Slide 13

Slide 13 text

13 2 OUR WEB DEVELOPMENT HISTORY

Slide 14

Slide 14 text

Snowman 14

Slide 15

Slide 15 text

SpotOn 15

Slide 16

Slide 16 text

Spotless – Planning 16

Slide 17

Slide 17 text

17 3 HOW WE USE REACT

Slide 18

Slide 18 text

Demo Customer Portal Nordic 18

Slide 19

Slide 19 text

Building blocks  React / Redux based on create-react-app  Structuring code by «Application»  TypeScript  Split between web and api  Handsontable  Highchart  Styled components 19

Slide 20

Slide 20 text

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