Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (18)
Destacado
Similar a React for .net developers
Similar a React for .net developers (20)
Último
Último (20)
React for .net developers
- 1. React for .net developers
- 2. Who am I? Head of Technology Ticket Arena / Event Genius Co-Founder YorkshireDigital @MacsDickinson www.macsdickinson.com
- 3. A brief history of web development in .Net
- 4. 2002ASP.NET 1.0 2006 JQuery 2007ASP.NET 3.5 2009ASP.NET MVC 1.0 2010 Knockout JS 2012ASP.NET WebAPI 1.0
- 5. 2012 - 2015
- 6. Where does this leave us in 2015?
- 7. Where does this leave us in 2015? Our users expect • Fast load times • Rich client functionality • Reactive behaviour • Great SEO
- 8. Where does this leave us in 2015? Our users expect • Fast load times • Rich client functionality • Reactive behaviour • Great SEO Our developers expect • Short learning curve • Testable code • Reusability • Freedom
- 10. Why React? • Easy to Learn • Encapsulated Components • Declarative • It’s easy to plug in
- 11. Core Concepts • Just the View (JSX) • Components • Top down data flow • State • The Virtual DOM
- 13. JSX
- 15. JSX
- 16. TSX
- 17. Components
- 18. Components As software developers we make complex systems simple enough for humans to understand
- 19. Components
- 20. Top Down Data Flow
- 21. Top down data flow
- 22. Top down data flow
- 23. Top down data flow
- 24. Top down data flow
- 25. Top down data flow
- 26. Top down data flow
- 27. Top down data flow
- 28. Top down data flow
- 29. Top down data flow
- 30. Top down data flow
- 31. Top down data flow
- 32. The Virtual DOM
- 37. State
- 38. Props vs State • Props hold the data you want to pass to your component • State can be updated
- 39. State
- 40. State
- 41. State
- 42. State
- 43. State
- 44. ReactJS.NET
- 45. ReactJS.NET MVC 4 & 5 Install-Package React.Web.Mvc4 AspNet 5 Install-Package React.AspNet
- 46. ReactJS.NET • On the fly jsx compilation and bundling
- 47. ReactJS.NET • Server Side Rendering • Integrates into your Razor templates
- 48. ReactJS.NET Pro Tips: • Use the React developer extension for Chrome • Don’t server compile when building your components as the errors aren’t great. • Enable TSX compilation in VS2015 if not using gulp • You will end up using gulp over VS tooling to handle dependencies, bundle and minify.
- 49. Where does this leave us in 2015? Our users get • Fast load times • Rich client functionality • Reactive behaviour • Great SEO Our developers get • Testable code • Short learning curve • Reusability • Freedom
- 51. Thank You @MacsDickinson www.macsdickinson.com @YorksDigital www.yorkshiredigital.com Slides and examples at www.macsdickinson.com
Notas del editor
- Thanks Andy + sponsors Intro to react Reasons why Core Concepts Some example
- Work at ticket arena – using asp.net, azure and React – ticketing platform Co-Founder of YD – online calendar of tech events Blog and twitter Not a React expert. Background is .NET
- ASP.NET – forms based web dev – built for win devs Jquery – DOM manipulation – CSS selectors ASP.NET 3.5 – AJAX Support MVC – Separation of concerns – better coding practices – built for the web KnockoutJS – Observable objects – more sophisticated client side code
- The industry goes JavaScript Crazy – and they all have cool logos! Expectation of logic on the client How do we choose?
- Internet speeds are faster - users more impatient. Users are used to instant responses Reactive/Responsive in functionality and device compatibility. SEO is a first class citizen - bad SEO can kill a product.
- Client code is as complex as server code so Testing Reusability So many frameworks – you can’t learn them all Package managers A lot of frameworks get in the way Devs don’t want to be restricted
- Created by Facebook/Instagram React is not the solution to everything. React + ASP.NET MVC compliment each other
- It’s just the view layer – simple API Everything is a component Encapsulated code Render declares how the component should look one-way data binding Always renders to the Shadow DOM Only renders changes to actual DOM Does not define your architecture Just the view layer – sit on any framework Can be added to an existing project.
- JSX is the template – the view
- JSX is a standard defined by Facebook - https://facebook.github.io/jsx/ Pre processed into JavaScript Most people recoil when they see this Html in JavaScript? No, this isn’t html, the div is a react component Familiar syntax Power of JavaScript behind it
- div is just a core React component that renders a div
- All components implement render() Tells react how to render HelloWorld Rendering HelloWorld at the bottom Passing in a parameter This transpiles into JavaScript – babel.js
- .Net developers love type safety! TypeScript supports JSX from 1.6 (September) React type definition Validates props within the component Validates all required props are passed in
- Components are the building blocks in React Everything is a component - liberating Thinking in components - changed how I build UI Often see devs struggle with complexity. How is this problem simple? No? How is this lots of simple problems?
- Breaking complex scenarios into simple chunks IS software development Doing it for years on the server – why not on the client? Creating small, encapsulated building blocks make everything easier Understanding the problem, writing the component It’s self contained so testing, reusability, maintenance is easier Thinking in react – facebook/youtube
- Components are self contained building blocks Piece them together to create your application Each is responsible for themselves Here we have an App component Inside there’s a Header, HelloWorld and Footer component
- Data is passed in the component Render is called – giving the new layout
- Back to the component from before
- The App takes a property – MenuItems – Array of MenuItem
- This is passed down to the Header component in MenuItems
- Here’s the header component
- It receives the MenuItems
- And passed them to the Menu component in the Items property
- Here’s the Menu component
- It takes the Items
- Here we scratch the surface of the power of React. This is just JavaScript It’s mapping the Items array to an array of Item components
- We can then pass this to the output
- What we get is a tree of elements This is passed to the virtual DOM. Example – React chrome extention
- This is the tree structure we saw earlier It is a virtual representation of the DOM
- Over time the state of the DOM elements will change
- React will mark these components as dirty
- The virtual DOM re renders these components It is smart enough to know exactly what needs to be re rendered It doesn’t overwrite all of the html In the last example it will have only change the name property Improves performance So much so both Angular and Ember are adopting this approach
- So far we’ve seen Props – how we pass data to a component Components can change over time For this we need State
- Here we have our Hello world Component from before It has been updated to contain state – the name
- In TypeScript we can define interfaces for the State and Props. These are passed to the base class we are extending If you’re not using TypeScript you don’t need to do this
- When the component is first created we’ll want to set the initial state Use the constructor If not using TypeScript you can call getInitialState(); If using EcmaScript2015 you still have the constructor
- In our render method we reference state instead of props You can still reference props here but they wont change I have also added a function to the onChange handler of the input onChange is a property of the input component
- Just a custom fuction There is some TypeScript specific code here React.FormEvent React.findDomNode In JS you’d just reference this.refs.name but that’s dynamic Don’t have Jquery - I tend to use refs At the bottom I call setState Any calls to setState will trigger a render setState only updates the specified properties Example
- So far I’ve only been talking about React React.NET is a library that integrates it into ASP.NET
- Installation is simple, just pull down the relevant NuGet package Most of the func is in React.Core These contain helpers for Razor and OWIN
- Compilation of JSX (no need to pre process) Doesn’t do TSX (yet AFAIK) ReactConfig goes in App_Start Added with NuGet package Compiles your jsx for you Adds map files for debugging Can be passed compiled js too if optimised or TSX
- React.Web.MVC contains html helper Model can be passed directly to the react template Is case sensitive Reference react.js, template.js and ReactInitJavaScript() to enable react to work on the client
- React community use Gulp Webkit CommonJS
- ReactJS.NET gives us server compilation This means our initial serve can optimised for SEO and load. ReactJS lets us add rich client functionality In a reusable, testable and maintainable way. ReactJS doesn’t force a giant framework on you learning curve is minimal Can be added to existing projects Components make everything more simple